() translation by (you can also view the original English article)
Dalam tips singkat ini saya akan menunjukkan kepada anda cara menerapkan CSS berdasarkan text rendering engine di masing-masing browser.
Tonton Screencast
Inilah masalahnya: tergantung pada browser dan sistem operasi, teks yang ditampilkan oleh browser anda akan ditampilkan secara berbeda. Hal ini bisa menjadi masalah bagi banyak designer, terutama mereka yang fokus pada penyempurnaan detail typographic seperti typeface, size, weight, spacing, dan sebagainya.
Jika anda bertujuan untuk lebih konsisten dalam desain anda, library JavaScript yang dinamakan Type Rendering Mix dari para legenda typography Tim Brown dan Bram Stein akan membantu anda.
library ini mendeteksi teks rasterizer dan metode antialiasing yang digunakan oleh browser dan menambahkan class ke elemen html untuk mencerminkan hasilnya, misalnya:
1 |
<html class="tr-coretext tr-aa-grayscale"> |
Dalam contoh di atas, kami ingin mengurangi weight blockquote di Chrome. Setelah memuat Type Rendering Mix ke dalam halaman, sebuah inspeksi cepat menunjukkan bahwa class tr-coretext telah diterapkan di Chrome, yang mencerminkan fakta bahwa ia menggunakan Core Text (Mac OS dan iOS) untuk melakukan rasterizing.
Kami kemudian dapat secara khusus menargetkan teks yang lebih berat dengan menambahkan aturan seperti ini ke CSS kami:
1 |
.tr-coretext blockquote { |
2 |
font-weight: 300; // lighter weight |
3 |
}
|
Kesimpulan
Type Rendering Mix sudah ada selama beberapa tahun yang lalu, namun ia adalah alat yang sederhana dan solid, menawarkan bantuan yang andal kepada designer yang ingin men-tweak cara type mereka yang di-render di berbagai browser berbeda.
