Penggabungan teks CSS: cantik

Ikut sertakan pengemasan teks yang dioptimalkan, untuk keindahan yang melebihi kecepatan.

Adam Argyle
Adam Argyle
X GitHub

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

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

Tipografi janda dan anak yatim bersifat tunggal kata yang berdiri sendiri di akhir paragraf atau blok teks. Janda adalah kata-kata sendirian di bagian atas blok teks dan anak yatim berada di akhir teks diblokir. Mereka dapat mengganggu cara mata kita membaca sekilas teks, sehingga membuat konten menjadi lebih sulit untuk dibaca. Beberapa desainer menghindarinya dengan cara apa pun dan berupaya keras 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 & Anak yatim

Mulai Chrome 117, anak yatim dapat dihindari dengan satu baris CSS: text-wrap: pretty.

Fitur ini tidak hanya memastikan paragraf tidak diakhiri dengan kata tunggal, kata kunci juga menyesuaikan tanda hubung jika muncul baris dengan tanda hubung yang berurutan di akhir paragraf atau menyesuaikan baris sebelumnya untuk memberi ruang. {i>User story<i} juga akan menyesuaikan justifikasi teks. text-wrap: pretty untuk pembungkus baris dan pemutusan teks yang umumnya lebih baik, yang saat ini difokuskan pada anak yatim. Di masa mendatang, text-wrap: pretty mungkin menawarkan lebih banyak peningkatan.

Perbandingan antara sebuah paragraf dengan anak yatim dan satu lagi yang tidak memiliki anak yatim, masing-masing dengan badge buruk atau baik.
Gambar bersumber dari Mengapa Anda harus menghapus anak yatim dari teks isi Anda.

Ada juga text-wrap: balance, yang tidak mencegah anak yatim piatu, tetapi memastikan teksnya dibungkus dengan cara yang teks harmonis. Saya pribadi menggunakan balance untuk judul dan pretty untuk paragraf.

Jika Anda tertarik dengan rincian 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 mendengar pendapat Anda mereka! Laporkan masalah di pelacak bug Chromium dengan menyertakan detail dan contoh baik dan buruk, dan kami akan menghubungi Anda kembali.