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