Penggabungan teks CSS: cantik

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

Adam Argyle
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

Tipografi janda dan anak yatim adalah satu kata 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. Pola ini dapat mengganggu mata kita saat membaca teks, sehingga membuat konten lebih sulit dibaca. Beberapa desainer menghindarinya dengan segala cara dan melakukan upaya besar untuk mencegahnya.

Sebuah paragraf ditampilkan dengan janda di awal dan anak yatim di akhir, dibandingkan dengan paragraf yang sama tanpa anak yatim atau janda.
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 dengan tanda hubung yang berurutan muncul di akhir paragraf atau menyesuaikan baris sebelumnya untuk mengosongkan ruang. Gaya visual juga akan disesuaikan dengan tepat untuk justifikasi teks. text-wrap: pretty ditujukan untuk penggabungan baris dan pemisahan teks yang umumnya lebih baik, saat ini berfokus pada teks yang tertinggal. 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 yang bersumber dari Mengapa Anda harus menghapus anak yatim dari teks isi.

Ada juga text-wrap: balance, yang tidak mencegah anak yatim, tetapi memastikan teks ditutup 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 peningkatan atau saran lain yang dapat menyebabkan gangguan baris, kami ingin sekali mendengarnya. Laporkan masalah di Chromium bug tracker dengan detail, contoh pemisah baris yang baik dan buruk, dan kami akan menghubungi Anda.