Giới thiệu
Khử răng cưa là một tính năng nổi bật trong đồ hoạ web. Đó là lý do chúng tôi có văn bản rõ ràng và hình vectơ mượt mà trên màn hình. Trên thực tế, có một vài phương pháp khử răng cưa được sử dụng trong các trình duyệt hiện nay, rõ ràng nhất là khi hiển thị văn bản. Khi thuật toán dùng để chống lại nút chuyển, thuật toán này có thể dẫn đến những kết quả trực quan ngoài dự kiến. Trong bài viết này, chúng ta sẽ tìm hiểu các phương pháp khử răng cưa và xem cách vẽ các pixel.
Như chúng ta đều biết, tất cả màn hình đều được tạo thành từ pixel. Đây là một lưới khổng lồ gồm các khối và mỗi khối chứa các thành phần màu đỏ, xanh lục và xanh dương (RGB). Ở khoảng cách xa, chúng ta thấy hình ảnh, văn bản và biểu tượng, nhưng gần hơn, chúng ta thực sự có thể thấy lưới các thành phần RGB và cách mọi thứ được tạo thành.
Làm mịn
Vậy điều gì xảy ra khi chúng ta vẽ một hình vectơ và hình này đi qua "một phần" của pixel? Giả sử hình dạng mà chúng ta đang vẽ có màu đen và nền màu trắng. Chúng ta có nên tô màu điểm ảnh đó không? Nếu chúng ta tô màu cho nó, nó sẽ có màu gì? Màu đen, xám, màu khác?
Quá trình khử răng cưa xác định màu chúng ta nên sử dụng khi điền pixel. Phiên bản đơn giản nhất của tính năng này được gọi là khử răng cưa thang màu xám và xử lý ba thành phần của pixel như nhau. Vì vậy, nếu pixel bị che phủ một nửa - và giả sử văn bản màu đen trên nền trắng trong giây để giữ cho nó đơn giản - bạn sẽ nghĩ rằng mỗi thành phần sẽ được đặt ở mức một nửa độ sáng (tôi biết chắc chắn mình đã làm), nhưng thực tế nó phức tạp hơn thế: bạn phải tính đến gamma, nghĩa là bạn có thể sẽ không bao giờ đặt nó thành giá trị chính xác đó. Tất nhiên là sẽ làm mọi việc phức tạp hơn một chút, nhưng vì đây là phần giới thiệu về chủ đề này, nên tôi sẽ không đi sâu vào phần này nữa. Điều quan trọng cần biết là khử răng cưa thang màu xám được xử lý ở cấp độ pixel và trên thực tế, chúng tôi có thể làm tốt hơn nhiều.
Trong Hình 2, bạn có thể thấy cùng một hình tam giác đang được vẽ, nhưng ở bên trái thì tính năng khử răng cưa được bật và ở bên phải, hình này bị tắt. Như bạn có thể thấy, khi tính năng khử răng cưa được bật, pixel sẽ có màu xám trong khi tam giác chỉ đi qua một phần của pixel. Tuy nhiên, khi bị tắt, pixel sẽ được điền dưới dạng màu đen đồng nhất hoặc màu trắng đồng nhất và hình dạng trông lởm chởm.
Hiển thị văn bản
Bất cứ khi nào trình duyệt hiển thị văn bản (về cơ bản là hình dạng vectơ), chúng ta sẽ gặp phải cùng một vấn đề: các ký tự của văn bản sẽ chỉ lấp đầy một phần một số pixel, vì vậy chúng ta sẽ cần có chiến lược về cách điền vào các pixel đó. Tốt nhất là chúng ta nên khử răng cưa văn bản vì điều này sẽ giúp văn bản dễ đọc và dễ đọc hơn.
Tuy nhiên, hoá ra phương pháp thang màu xám để khử răng cưa chỉ là một cách để xử lý. Một phương pháp thường được áp dụng là chọn lọc hơn một chút về cách bật các thành phần RGB của pixel. Quá trình này được gọi là khử răng cưa bằng pixel phụ và trong những năm qua, nhóm ClearType tại Microsoft đã đầu tư rất nhiều thời gian và công sức để phát triển quy trình này. Tính năng này hiện được sử dụng rộng rãi hơn nhiều và tất cả các trình duyệt chính đều sử dụng công cụ này với mức độ phổ biến cao hơn hoặc thấp hơn.
Trước tiên, vì biết rằng trong thực tế, mỗi pixel được tạo thành từ các thành phần màu đỏ, xanh lục và xanh dương riêng biệt, nên chúng ta xác định mức độ "bật" của mỗi thành phần đó cho pixel được đề cập. Vì vậy, nếu một pixel bị "che phủ một nửa" từ phía bên trái thì chúng ta có thể bật toàn bộ thành phần màu đỏ, thành phần màu xanh lục sang một nửa và giữ màu xanh dương tắt. Quá trình này thường được mô tả là "tăng gấp ba lần độ phân giải theo chiều ngang của màn hình" và dựa trên thực tế là mỗi pixel thực sự là ba thành phần riêng biệt cạnh nhau thay vì một đơn vị duy nhất.
Trong hình 3 ở trên, bạn có thể thấy rằng ở bên trái, chúng ta xử lý các thành phần như nhau và các thành phần được bật hoặc tắt như nhau (thang màu xám). Tuy nhiên, ở phía bên phải, chúng ta sử dụng phương pháp pixel phụ, bật từng thành phần (đỏ, xanh lục và xanh dương) theo cách khác nhau tuỳ thuộc vào mức độ chồng chéo với hình dạng đang được vẽ.
Tuy nhiên, tầm nhìn của con người không thực sự cân nhắc được ánh sáng đỏ, xanh lục và xanh dương một cách như nhau. Chúng ta nhạy cảm với màu xanh lục hơn nhiều so với màu đỏ hoặc màu xanh dương. Điều này có nghĩa là mặc dù có lợi ích chắc chắn đối với việc khử răng cưa thang màu xám, nhưng Darel Rex Finley lưu ý, việc bật từng thành phần riêng biệt không thực sự giúp cải thiện độ rõ nét gấp 3 lần. Tuy nhiên, tính năng khử răng cưa của pixel phụ chắc chắn rất hữu ích, và điều đó có nghĩa là chúng ta sẽ nhìn thấy văn bản rõ ràng hơn so với khi sử dụng tính năng khử răng cưa thang màu xám.
Bắt kịp tiến độ
Tất cả những điều này có ảnh hưởng gì đến chúng tôi trong vai trò nhà phát triển? Từ góc độ của Chrome, ít nhất bạn cần kết hợp cả tính năng khử răng cưa thang màu xám và khử răng cưa pixel phụ để hiển thị văn bản, ngoài ra bạn sẽ nhận được văn bản nào phụ thuộc vào một vài tiêu chí. Tuy nhiên, để bắt đầu, chúng ta cần hiểu một chút về lớp, bởi vì đó là tiêu chí chính khi chơi. Nếu bạn chưa tìm hiểu các lớp và cách Chrome sử dụng các lớp đó trong nội bộ, thì Tom Wiltzius đã viết một phần giới thiệu tuyệt vời về chủ đề này mà bạn nên đọc trước tiên.
Giả sử bạn đã quen thuộc với các lớp hoặc vừa mới đọc về các lớp, hãy tiếp tục. Nếu tính năng kết hợp phần cứng được bật cho trang và bạn có nội dung văn bản trên một lớp không phải là lớp gốc, thì theo mặc định, tính năng này sẽ hiển thị bằng cách sử dụng tính năng khử răng cưa thang màu xám. Các nhà phát triển thường nhận thấy rằng nếu họ áp dụng hình thức tấn công cho các thành phần để đưa chúng vào các lớp riêng (không phải thư mục gốc) (chẳng hạn như sử dụng translationZ) thì họ sẽ thấy văn bản được hiển thị theo cách khác. Thông thường, các nhà phát triển áp dụng nhanh chóng trình kích hoạt "lớp mới" thông qua JavaScript hoặc CSS, khiến quá trình kết xuất văn bản chuyển từ điểm ảnh con sang thang màu xám; điều này có thể gây nhầm lẫn nếu bạn không biết điều gì đã kích hoạt thay đổi hiển thị. Tuy nhiên, nếu văn bản của bạn nằm trong lớp gốc, thì văn bản đó phải được hiển thị bằng tính năng khử răng cưa của pixel con và do đó, văn bản sẽ rõ ràng hơn nhiều.
Tuy nhiên, giống như mọi thứ trên web, web đều đang thay đổi. Tính năng khử răng cưa của pixel phụ đang được bật trong Chrome cho văn bản trong các lớp không phải gốc, miễn là lớp này đáp ứng 3 tiêu chí. Bạn nên nói rằng những tiêu chí này áp dụng ngay hôm nay, nhưng có thể các tiêu chí này sẽ thay đổi và bạn sẽ thấy thêm các trường hợp được đề cập trong thời gian tới. Hiện nay, các tiêu chí đó là:
- Lớp này có màu nền mờ hoàn toàn. Đáng chú ý là việc sử dụng
border-radiushoặc một giá trịbackground-clipkhông mặc định dẫn đến việc lớp được coi là không mờ và quá trình kết xuất văn bản chuyển về hiệu ứng khử răng cưa thang màu xám. - Lớp này chỉ có thể áp dụng biến đổi nhận dạng hoặc bản dịch tích phân. Theo tích phân, chúng tôi có nghĩa là các giá trị làm tròn. Ví dụ:
translate(20.2px, 30px)sẽ dẫn đến việc khử răng cưa thang màu xám vì thành phần x,20.2px, không tích phân. Biến đổi nhận dạng chỉ đơn giản có nghĩa là không có thêm chế độ xoay, dịch chuyển hoặc điều chỉnh theo tỷ lệ nào được áp dụng ngoài giá trị mặc định. - Lớp phủ có độ mờ là 1,0. Mọi thay đổi về độ mờ cũng sẽ làm thay đổi hiệu ứng khử răng cưa từ pixel con sang thang màu xám.
Một điều cuối cùng cần lưu ý là việc áp dụng ảnh động CSS có thể khiến tạo lớp mới, trong khi việc sử dụng requestAnimationFrame thì không. Đối với một số nhà phát triển, sự khác biệt về hiển thị văn bản ngụ ý đã loại trừ việc sử dụng ảnh động CSS. Vì vậy, nếu bạn đang sử dụng JavaScript để tạo hiệu ứng động cho các phần tử do những khác biệt về cách hiển thị văn bản, hãy kiểm tra xem nội dung cập nhật này có khắc phục được mọi vấn đề cho bạn hay không!
Vậy là Chrome đã đề cập đến. Đối với các trình duyệt khác, Opera, khi chuyển sang Chromium, phải phù hợp với hành vi của Chrome. Internet Explorer dường như sử dụng tính năng khử răng cưa pixel phụ cho hầu hết tất cả văn bản (tất nhiên là nếu bạn đã bật ClearType!), mặc dù có vẻ như không ở chế độ Metro của Windows 8. Safari, do WebKit ở gần với Blink, hoạt động rất giống với Chrome, mặc dù không có các cải tiến mới hơn này cho phép khử răng cưa nhiều pixel phụ hơn. Firefox phần lớn hoạt động theo cách tương tự như Internet Explorer vì nó sử dụng tính năng khử răng cưa pixel phụ cho hầu hết tất cả văn bản. Tất nhiên đây không phải là danh sách đầy đủ và có thể xảy ra trường hợp ở tất cả các trình duyệt mà tính năng khử răng cưa thang màu xám được sử dụng thay cho pixel phụ, nhưng bạn nên biết rằng tính năng khử răng cưa của pixel phụ được sử dụng rộng rãi trên bộ trình duyệt chính.
Kết luận
Giờ thì bạn đã biết một chút về cách hoạt động của tính năng khử răng cưa và lý do tại sao bạn có thể thấy sự khác biệt về kết xuất văn bản trên các trang web và ứng dụng hiện nay, đặc biệt là trên các thiết bị có DPI thấp hơn. Nếu bạn muốn theo dõi cách triển khai của Chrome liên quan đến tính năng hiển thị văn bản, bạn nên gắn dấu sao các lỗi sau:
- Tự động chống răng cưa thang màu xám trên 48px không thể ghi đè
- Hiển thị phông chữ kinh khủng với Phông chữ trên web của Google trên Chrome dành cho Windows)
- Hỗ trợ DirectWrite