Pengantar
Antialiasing adalah pahlawan tanpa tanda jasa dalam grafik web; itulah alasan kita memiliki teks yang jelas dan bentuk vektor yang halus di layar. Sebenarnya ada beberapa pendekatan untuk antialiasing yang digunakan di browser saat ini yang paling jelas dalam hal rendering teks. Ketika algoritma yang digunakan untuk melakukan antialising switch, hal ini dapat menyebabkan hasil visual yang tidak terduga. Dalam artikel ini, kita akan melihat pendekatan untuk membuat antialias dan melihat bagaimana piksel digambar.
Seperti yang kita semua tahu, semua layar terdiri dari {i>pixel<i}. Ini adalah kisi-kisi blok raksasa, dan masing-masing berisi komponen merah, hijau, dan biru (RGB). Dari jauh, kita melihat gambar, teks, dan ikon, tetapi lebih dekat, kita sebenarnya dapat melihat petak komponen RGB dan bagaimana semuanya disusun.
Memperjelas
Jadi apa yang terjadi ketika kita menggambar bentuk vektor dan melewati “bagian” dari sebuah {i>pixel<i}? Anggaplah bentuk yang kita gambar berwarna hitam dan latar belakang berwarna putih. Haruskah kita mewarnai {i>pixel<i} itu sama sekali? Jika kita mewarnainya, apa warnanya? Hitam, abu-abu, ada yang lain?
Proses antialiasing menentukan warna yang harus kita gunakan saat mengisi piksel. Versi paling sederhana dari itu disebut antialiasing hitam putih, dan memperlakukan tiga komponen piksel secara sama. Jadi, jika piksel tertutup setengah - dan anggaplah teks hitam berwarna putih selama sedetik agar lebih sederhana - Anda akan berpikir setiap komponen akan disetel ke setengah kecerahan (saya tahu saya pasti melakukannya), tetapi sebenarnya ini lebih kompleks dari itu: Anda harus memperhitungkan gamma, yang berarti Anda mungkin tidak akan pernah menyetelnya ke nilai yang tepat. Hal itu tentu saja membuat segalanya sedikit lebih rumit, tetapi karena ini adalah pengantar topik, saya tidak akan membahasnya di sini. Hal penting yang perlu diketahui adalah antialiasing hitam putih ditangani di tingkat piksel dan kita bahkan dapat melakukannya jauh lebih baik.
Pada Gambar 2, Anda bisa melihat segitiga yang sama yang digambar, tetapi di sebelah kiri mengaktifkan antialiasing dan di sebelah kanan sudah dinonaktifkan. Seperti yang dapat Anda lihat, saat antialiasing diaktifkan, piksel berwarna abu-abu jika segitiga hanya melewati sebagian piksel. Namun, saat dinonaktifkan, piksel akan diisi sebagai hitam solid atau putih solid dan bentuknya tampak bergerigi.
Rendering Teks
Kapan pun browser merender teks, yang pada dasarnya adalah bentuk vektor, kita akan menghadapi masalah yang sama: karakter teks hanya akan mengisi sebagian piksel, sehingga kita perlu memiliki strategi untuk mengisi piksel tersebut. Idealnya, kita ingin teks bersifat antialias karena akan membuatnya lebih mudah dan menyenangkan untuk dibaca.
Namun, ternyata pendekatan hitam putih untuk antialiasing hanyalah salah satu cara untuk menanganinya. Pendekatan yang sering dilakukan adalah menjadi sedikit lebih selektif dengan cara mengaktifkan komponen RGB dari {i>pixel<i}. Proses ini disebut antialiasing subpiksel dan selama bertahun-tahun tim ClearType di Microsoft khususnya telah menginvestasikan banyak waktu dan upaya untuk mengembangkannya. API ini sekarang banyak digunakan secara luas, dan semua {i>browser<i} utama menggunakannya dalam tingkat yang lebih besar atau lebih sedikit.
Pertama, karena kita tahu bahwa setiap piksel sebenarnya terdiri dari komponen merah, hijau, dan biru yang terpisah, kita mendeteksi berapa banyak dari masing-masing komponen tersebut yang harus "dihidupkan" untuk piksel yang dimaksud. Jadi, jika piksel "setengah tertutup" dari sisi kiri, maka kita mungkin mengaktifkan komponen merah sepenuhnya, komponen hijau menjadi setengah, dan tetap mematikan warna biru. Proses ini sering digambarkan sebagai “tiga kali lipat resolusi horizontal layar”, dan bergantung pada fakta bahwa setiap piksel sebenarnya adalah tiga komponen terpisah yang berdampingan, bukan satu unit.
Pada gambar 3 di atas, Anda dapat melihat bahwa di sebelah kiri kita memperlakukan setiap komponen secara setara dan masing-masing komponen diaktifkan atau dinonaktifkan secara setara (skala abu-abu). Namun, di sisi kanan, kita menggunakan pendekatan subpiksel, memungkinkan setiap komponen (merah, hijau, dan biru) secara berbeda bergantung pada seberapa banyak komponen tumpang tindih dengan bentuk yang digambar.
Namun, dengan semua itu, penglihatan manusia tidak benar-benar memiliki bobot cahaya merah, hijau, dan biru. Kita jauh lebih sensitif terhadap warna hijau daripada merah atau biru, dan ini berarti meskipun ada manfaat yang pasti dibandingkan antialiasing hitam putih, seperti yang dicatat Darel Rex Finley, mengaktifkan setiap komponen secara terpisah tidak benar-benar akan menghasilkan peningkatan kejelasan 3x lipat. Namun, antialiasing subpiksel pasti sangat membantu, dan itu berarti kita akan melihat teks secara lebih jelas dibandingkan jika antialiasing hitam putih digunakan.
Berlari
Apa arti semua ini bagi kita sebagai developer? Yah, dari perspektif Chrome setidaknya ada campuran antialiasing hitam putih dan subpiksel yang digunakan untuk merender teks, dan mana yang Anda dapatkan bergantung pada beberapa kriteria. Namun, untuk memulainya, kita perlu memahami sedikit tentang {i>layer<i}, karena itu adalah kriteria utama yang digunakan. Jika Anda tidak menemukan lapisan dan bagaimana lapisan tersebut digunakan secara internal oleh Chrome, Tom Wiltzius telah menulis pengantar topik yang luar biasa yang harus Anda baca terlebih dahulu.
Bila Anda sudah familier dengan {i>layer<i}, atau Anda baru saja membaca tentang {i>layer<i}, mari kita lanjutkan. Jika pengomposisian hardware diaktifkan untuk halaman, dan Anda memiliki konten teks di lapisan yang bukan lapisan root, secara default, konten akan dirender menggunakan antialiasing hitam putih. Developer sering melihat bahwa jika menerapkan peretasan ke elemen untuk memasukkannya ke lapisan (non-root) mereka sendiri (seperti menggunakan translateZ), mereka akan melihat teks dirender secara berbeda. Sering kali developer menerapkan pemicu "lapisan baru" dengan cepat melalui JavaScript atau CSS yang menyebabkan rendering teks beralih dari subpiksel ke hitam putih; hal ini dapat membingungkan jika Anda tidak tahu apa yang memicu perubahan rendering. Namun, jika teks Anda berada di lapisan root, teks harus dirender dengan antialias subpiksel, dan oleh karena itu akan jauh lebih jelas untuk dibaca.
Namun, seperti semua hal terkait web, web juga berubah. Antialiasing subpiksel diaktifkan di Chrome untuk teks di lapisan non-root, asalkan lapisan tersebut memenuhi tiga kriteria. Dapat dipastikan bahwa kriteria ini berlaku hari ini, tetapi kemungkinan akan berubah dan Anda akan melihat lebih banyak kasus yang dicakup dari waktu ke waktu. Saat ini kriteria tersebut adalah:
- Lapisan memiliki warna latar belakang yang sepenuhnya buram. Secara khusus, penggunaan
border-radiusatau nilaibackground-clipnon-default menyebabkan lapisan diperlakukan sebagai tidak buram dan rendering teks kembali ke antialiasing hitam putih. - Lapisan hanya dapat menerapkan transformasi identitas atau terjemahan integral. Integral yang kami maksud adalah nilai yang dibulatkan. Jadi, misalnya
translate(20.2px, 30px)akan menghasilkan antialiasing hitam putih karena komponen x,20.2px, non-integral. Transformasi identitas berarti bahwa tidak ada rotasi, terjemahan, atau penskalaan tambahan yang diterapkan di luar default-nya. - Lapisan memiliki opasitas 1,0. Setiap perubahan opasitas akan mengubah antialiasing dari subpiksel menjadi hitam putih.
Satu hal terakhir yang perlu diperhatikan adalah penerapan animasi CSS dapat menyebabkan pembuatan lapisan baru, sedangkan penggunaan requestAnimationFrame tidak. Bagi beberapa developer, perbedaan rendering teks yang menyiratkan telah menghalangi penggunaan animasi CSS. Jadi, jika Anda menggunakan JavaScript untuk menganimasikan elemen karena perbedaan rendering teks, periksa apakah pembaruan ini memperbaiki beberapa hal untuk Anda.
Jadi, Chrome sudah tercakup. Sejauh browser lain berjalan, Opera, saat beralih ke Chromium, seharusnya sangat cocok dengan perilaku Chrome. Internet Explorer tampaknya menggunakan antialiasing subpiksel untuk hampir semua teks (jika Anda telah mengaktifkan ClearType, tentu saja!), meskipun tampaknya tidak dalam mode Metro Windows 8. Safari, mengingat WebKit yang dekat dengan Blink, berperilaku sangat mirip dengan Chrome, meskipun tanpa peningkatan baru ini yang memungkinkan lebih banyak antialias subpiksel. Sebagian besar Firefox berperilaku sama seperti Internet Explorer karena menggunakan antialias subpiksel untuk hampir semua teks. Tentu saja ini bukanlah daftar yang lengkap, dan ada kemungkinan terjadi kasus di semua browser yang menggunakan antialiasing hitam putih sebagai pengganti subpiksel, tetapi ada baiknya mengetahui bahwa antialiasing subpiksel digunakan secara luas di seluruh kumpulan browser utama.
Kesimpulan
Jadi, sekarang Anda telah mengetahui sedikit tentang cara kerja antialiasing, dan mengapa Anda mungkin melihat perbedaan rendering teks di situs dan aplikasi Anda saat ini, terutama di perangkat DPI yang lebih rendah. Jika Anda tertarik untuk mengikuti implementasi Chrome sehubungan dengan rendering teks, Anda harus membintangi bug berikut:
- Anti-Aliasing Font Otomatis Hitam Putih di atas 48 piksel tidak Dapat Diganti
- Rendering font yang mengerikan dengan Google Web Fonts di Chrome untuk Windows)
- Dukungan DirectWrite