Penggabungan teks CSS: cantik

Ikut serta dalam penggabungan teks yang dioptimalkan, untuk tampilan yang lebih baik daripada kecepatan.

Adam Argyle

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

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

Widow dan orphan tipografi adalah kata tunggal yang berdiri sendiri di akhir paragraf atau blok teks. Widow adalah kata yang berdiri sendiri di bagian atas blok teks dan orphan adalah kata yang berdiri sendiri di akhir blok teks. Hal ini dapat mengganggu cara mata kita membaca teks, sehingga konten menjadi lebih sulit dibaca. Beberapa desainer menghindarinya dengan segala cara dan melakukan upaya besar untuk mencegahnya.

Paragraf ditampilkan dengan paragraf tunggal di awal dan paragraf tunggal di akhir, dibandingkan dengan paragraf yang sama tanpa paragraf tunggal.
Gambar bersumber 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 bertanda hubung berturut-turut muncul di akhir paragraf atau menyesuaikan baris sebelumnya untuk memberi ruang. Hal ini juga akan menyesuaikan perataan teks dengan tepat. text-wrap: pretty ditujukan untuk penggabungan baris dan pemisahan teks yang umumnya lebih baik, saat ini berfokus pada teks yang terpotong. Di masa mendatang, text-wrap: pretty mungkin menawarkan lebih banyak peningkatan.

Perbandingan paragraf dengan anak tunggal dan paragraf tanpa anak tunggal, masing-masing dengan badge buruk atau baik.
Gambar diambil dari Alasan Anda harus menghapus baris tunggal dari isi teks.

Ada juga text-wrap: balance, yang tidak mencegah teks yang tertinggal, tetapi memastikan teks digabungkan dengan cara yang membuat blok teks yang harmonis. Secara pribadi, saya menggunakan balance untuk judul dan pretty untuk paragraf.

Jika Anda tertarik dengan detail algoritma 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 pemisahan baris lainnya, beri tahu kami. Laporkan masalah di Chromium bug tracker dengan detail, contoh pemisah baris yang baik dan buruk, dan kami akan menghubungi Anda.