Penggabungan teks CSS: cantik

Gunakan pengemasan teks yang dioptimalkan untuk meningkatkan kecantikan di atas kecepatan.

Adam Argyle
Adam Argyle
X GitHub

Mulai Chrome 117, Anda dapat menggunakan fitur pengemasan teks baru—text-wrap: pretty dari CSS Text Level 4.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

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.

Paragraf ditampilkan dengan seorang janda di awal dan anak yatim di bagian akhir, dibandingkan dengan paragraf yang sama tanpa anak yatim atau janda.
Gambar berasal dari Google Fonts—Widows & Orphans

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.
Gambar yang berasal dari Mengapa Anda harus menghapus anak yatim dari teks isi.

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.