Pengantar
Antialiasing adalah salah satu pahlawan tak dikenal dalam grafis web; itulah alasan kita memiliki teks yang jelas dan bentuk vektor yang halus di layar. Sebenarnya ada beberapa pendekatan antialiasing yang digunakan di browser saat ini yang paling jelas dalam hal rendering teks. Ketika algoritma yang digunakan untuk memantikan tombol, algoritma tersebut dapat memberikan hasil visual yang tidak terduga. Dalam artikel ini, kita akan melihat pendekatan terhadap antialiasing dan melihat bagaimana piksel digambar.
Seperti yang kita semua ketahui, semua layar terdiri dari piksel. Ini adalah kisi-kisi blok raksasa, dan masing-masing berisi komponen merah, hijau dan biru (RGB). Dari jarak jauh, kita dapat melihat gambar, teks, dan ikon, tetapi dari dekat kita dapat melihat grid komponen RGB dan bagaimana semuanya dibuat.
Memperjelas
Jadi apa yang terjadi ketika kita menggambar bentuk vektor dan melewati “bagian” sebuah {i>pixel<i}? Mari asumsikan bahwa bentuk yang kita gambar adalah hitam dan latar belakang berwarna putih. Haruskah kita mewarnai piksel itu? Jika kita mewarnainya, apa warnanya? Hitam, abu-abu, atau lainnya?
Proses antialiasing menentukan warna mana yang harus kita gunakan ketika mengisi piksel. Versi paling sederhana dari itu disebut antialiasing hitam putih, dan memperlakukan tiga komponen piksel secara setara. Jadi jika piksel tertutup setengah - dan mari asumsikan teks hitam dengan putih selama satu detik agar tetap sederhana - Anda akan berpikir setiap komponen akan disetel ke setengah kecerahan (saya tahu, saya memang begitu), tetapi sebenarnya ini lebih rumit dari itu: Anda harus memperhitungkan gamma, yang berarti Anda mungkin tidak akan pernah mengaturnya ke nilai yang tepat. Hal ini tentunya membuatnya sedikit lebih rumit, tetapi karena ini adalah pengantar topik, saya tidak akan mendalaminya di sini. Hal penting yang perlu diketahui adalah bahwa antialiasing hitam putih ditangani pada tingkat piksel dan sebenarnya kita dapat melakukannya dengan lebih baik.
Pada Gambar 2, Anda dapat melihat segitiga yang sama sedang digambar, tetapi di sebelah kiri antialiasing telah diaktifkan dan di sebelah kanan telah dinonaktifkan. Seperti yang dapat Anda lihat, ketika antialiasing diaktifkan, piksel akan bernuansa abu-abu ketika segitiga hanya melewati sebagian piksel. Namun, jika dinonaktifkan, piksel akan diisi dengan warna hitam solid atau putih solid dan bentuknya terlihat bergerigi.
Rendering Teks
Kapan pun {i>browser <i}merender teks, yang pada dasarnya adalah bentuk vektor, kita akan menghadapi masalah yang sama: karakter teks hanya akan mengisi sebagian piksel sehingga kita akan memiliki strategi untuk mengisi piksel tersebut. Idealnya, kita ingin teks menjadi antialias karena akan membuatnya lebih mudah dan lebih menyenangkan untuk dibaca.
Namun, ternyata pendekatan hitam putih untuk antialiasing hanyalah salah satu cara untuk menanganinya. Pendekatan yang sering diambil adalah menjadi sedikit lebih selektif dalam cara mengaktifkan komponen RGB piksel. Proses ini disebut subpiksel antialiasing dan selama bertahun-tahun tim ClearType di Microsoft telah menginvestasikan banyak waktu dan upaya untuk membuat kemajuan pada proses ini. Kini skrip ini jauh lebih banyak digunakan, dan semua {i>browser<i} besar menggunakannya secara luas atau lebih kecil.
Pertama, karena kita tahu bahwa setiap piksel sebenarnya terdiri dari komponen berwarna merah, hijau, dan biru yang terpisah, kita mendeteksi berapa banyak dari setiap komponen tersebut yang harus "diaktifkan" untuk piksel yang dimaksud. Jadi, jika piksel “tertutup setengah” dari sisi kiri, kita mungkin mengaktifkan komponen merah sepenuhnya, komponen hijau menjadi setengah, dan membiarkan warna biru dimatikan. Proses ini sering digambarkan sebagai “tiga kali lipat resolusi horizontal layar”, dan bergantung pada fakta bahwa setiap piksel sebenarnya merupakan 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 setiap komponen diaktifkan atau dinonaktifkan secara setara (skala abu-abu). Namun, di sisi kanan, kami menggunakan pendekatan subpiksel, yang memungkinkan setiap komponen (merah, hijau, dan biru) secara berbeda bergantung pada seberapa banyak komponen tumpang tindih dengan bentuk yang digambar.
Namun, dengan semua yang telah dikatakan, penglihatan manusia tidak benar-benar menimbang cahaya merah, hijau, dan biru. Kami jauh lebih sensitif terhadap warna hijau daripada merah atau biru, dan ini berarti bahwa meskipun ada manfaat pasti atas antialiasing hitam putih, seperti catatan Darel Rex Finley, mengaktifkan setiap komponen secara terpisah tidak sebenarnya akan menghasilkan peningkatan 3x lipat dalam kejelasan. Antialiasing subpiksel tentu saja sangat membantu, dan itu berarti bahwa kita melihat teks dengan lebih jelas daripada jika antialiasing hitam putih digunakan.
Bersiap untuk mengejar kejar-kejaran
Apa arti semua ini bagi kita sebagai developer? Nah, 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 sedikit memahami lapisan, karena itu adalah kriteria utama yang digunakan. Jika Anda belum pernah menemukan lapisan dan bagaimana lapisan tersebut digunakan secara internal oleh Chrome, Tom Wiltzius telah menulis pengantar yang luar biasa tentang topik ini yang harus Anda baca terlebih dahulu.
Dengan asumsi Anda sudah terbiasa dengan lapisan, atau baru saja membaca tentang lapisan, mari kita lanjutkan. Jika komposisi hardware diaktifkan untuk halaman, dan Anda memiliki konten teks pada lapisan yang bukan lapisan root, secara default akan dirender menggunakan antialiasing hitam putih. Developer sering kali memperhatikan bahwa jika mereka menerapkan peretasan pada 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 bisa membingungkan jika Anda tidak tahu apa yang memicu perubahan rendering. Akan tetapi, jika teks Anda berada di lapisan akar, teks itu harus dirender dengan antialiasing subpiksel, dan akibatnya menjadi jauh lebih jelas untuk dibaca.
Namun, seperti semua hal yang ada di web, hal ini terus berubah. Antialiasing subpiksel diaktifkan di Chrome untuk teks dalam lapisan non-root, asalkan lapisan tersebut memenuhi tiga kriteria. Perlu dikatakan bahwa kriteria ini berlaku sekarang, tetapi kemungkinan kriteria tersebut akan berubah dan Anda akan melihat lebih banyak kasus yang dibahas seiring waktu. Sekarang, kriteria tersebut adalah:
- Lapisan memiliki warna latar belakang yang sepenuhnya buram. Khususnya, penggunaan nilai
border-radiusataubackground-clipnon-default menyebabkan lapisan diperlakukan sebagai non-buram dan rendering teks akan kembali ke antialiasing hitam putih. - Lapisan hanya dapat memiliki transformasi identitas atau terjemahan integral yang diterapkan padanya. Integral berarti 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 ini memiliki opasitas 1,0. Setiap perubahan opasitas akan mengubah antialiasing dari subpiksel menjadi hitam putih.
Satu hal terakhir yang perlu diperhatikan adalah menerapkan animasi CSS dapat menyebabkan lapisan baru dibuat, sedangkan penggunaan requestAnimationFrame tidak. Bagi sebagian developer, perbedaan rendering teks yang menyiratkan telah menghalangi penggunaan animasi CSS. Jadi, jika Anda telah menggunakan JavaScript untuk menganimasikan elemen karena perbedaan rendering teks, periksa apakah pembaruan ini memperbaiki segalanya untuk Anda!
Jadi, semuanya sudah di Chrome. Sejauh browser lain berjalan, Opera, saat berpindah ke Chromium, akan 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 kedekatan WebKit dengan Blink, berperilaku sangat mirip dengan Chrome, meski tanpa peningkatan baru ini yang memungkinkan penggunaan antialiasing subpiksel lebih banyak. Firefox sebagian besar berperilaku sama seperti Internet Explorer sejauh ini menggunakan antialiasing subpiksel untuk hampir semua teks. Tentu saja ini bukan daftar yang lengkap, dan mungkin ada kasus di semua browser di mana antialiasing hitam putih digunakan sebagai ganti subpiksel, tetapi ada baiknya Anda mengetahui bahwa antialiasing subpiksel banyak digunakan di seluruh kumpulan browser utama.
Kesimpulan
Jadi sekarang Anda tahu sedikit tentang cara kerja antialiasing, dan mengapa Anda melihat perbedaan rendering teks di situs dan aplikasi saat ini, terutama pada perangkat DPI yang lebih rendah. Jika Anda tertarik untuk mengikuti implementasi Chrome sehubungan dengan rendering teks, Anda harus menandai bug berikut:
- Font Grayscale Anti-Aliasing Otomatis di atas 48 px tidak Dapat Diganti
- Rendering font yang mengerikan dengan Google Web Fonts di Chrome untuk Windows)
- Dukungan DirectWrite