Gunakan pengemasan teks yang dioptimalkan untuk meningkatkan kecantikan di atas kecepatan.
Mulai Chrome 117, Anda dapat menggunakan fitur pengemasan teks baru—text-wrap: pretty
dari CSS Text Level 4.
p {
text-wrap: pretty;
}
Tipografi widow dan yatim piatu adalah satu kata yang berdiri sendiri di akhir paragraf atau blok teks. Janda adalah kata-kata yang berdiri sendiri di bagian atas blok teks dan anak yatim sendirian berada di akhir blok teks. Mode ini dapat mengganggu cara mata kita membaca sekilas teks, membuat konten lebih sulit dibaca. Beberapa desainer menghindarinya dengan cara apa pun dan melakukan upaya keras untuk mencegahnya.
Mulai Chrome 117, anak yatim dapat dihindari dengan satu baris CSS: text-wrap: pretty
.
Fitur ini tidak hanya memastikan paragraf tidak diakhiri dengan satu kata, tetapi juga menyesuaikan tanda hubung jika baris dengan tanda hubung berturut-turut muncul
di akhir paragraf atau menyesuaikan baris sebelumnya untuk memberikan ruang. Gambar juga akan
disesuaikan dengan tepat untuk justifikasi teks. text-wrap: pretty
ditujukan untuk
penggabungan baris dan jeda teks yang umumnya lebih baik, yang saat ini berfokus pada orphan.
Pada masa mendatang, text-wrap: pretty
mungkin menawarkan peningkatan lainnya.
![Perbandingan paragraf yang berisi anak yatim dan paragraf tanpa anak yatim, masing-masing dengan badge buruk atau baik.](https://developer.chrome.google.cn/static/blog/css-text-wrap-pretty/image/a-comparison-a-paragraph-8806ede4d3829.png?authuser=19&hl=id)
Ada juga text-wrap: balance
, yang tidak
mencegah anak yatim, tetapi memastikan teks digabungkan dengan cara yang membuat
blok teks yang harmonis. Saya pribadi menggunakan balance
untuk judul dan pretty
untuk paragraf.
Jika Anda ingin mengetahui detail algoritme yang digunakan untuk menentukan jumlah baris yang optimal atau pertimbangan performa, berikut link ke dokumen desain yang dibuat oleh engineer di balik fitur ini, Koji Ishii.
Jika Anda memiliki saran atau peningkatan yang dapat menyebabkan gangguan baris lainnya, kami akan menyampaikannya. Laporkan masalah di pelacak bug Chromium dengan menyertakan detail, contoh jeda baris yang baik dan buruk, dan kami akan menghubungi Anda.