Kapan menggunakan CSS text-wrap:balance vs text-wrap:pretty – Beragampengetahuan

ini text-wrap Properti CSS mencapai status dasar “baru tersedia” pada tahun 2024. Artinya properti ini didukung oleh versi stabil terbaru dari browser web terpopuler, namun versi lama tidak didukung. Namun hal itu tidak menghentikannya untuk menjadi sangat populer, terutama di kalangan orang-orang balance Dan pretty nilai-nilai.

tapi apa gunanya text-wrap Apa sebenarnya fungsinya? Apakah itu sesuai dengan hype? Di artikel ini Anda akan belajar text-wrap Properti CSS, perbedaan nilainya, perannya, dan dampaknya terhadap desain UI.

apa text-wrap Apa fungsi properti CSS?

Jika tidak ada cukup ruang untuk menampilkan teks, teks akan digulung ke baris berikutnya untuk mencegah luapan. Ini adalah perilaku default, jadi Anda tidak perlu melakukan apa pun untuk mengaktifkan pembungkusan teks. Anda dapat melihatnya beraksi di paragraf ini. Namun, text-wrap Definisi properti CSS Bagaimana Itu dibungkus, meskipun kita juga bisa menggunakannya untuk mematikan pembungkusan teks. Properti ini menerima lima nilai:

• wrap
• nowrap
• balance
• pretty
• stable

text-wrap: wrap

wrap adalah nilai default. Setiap kali nilainya adalah nilai terhitung (sekali lagi, seperti sekarang di paragraf ini), teks dibungkus selama tidak ada lagi spasi pada baris tersebut, meskipun hanya pada titik yang wajar agar tidak merusak keterbacaan. Misalnya, pembungkusan teks tidak terjadi di tengah kata (lihat overflow-wrap Dan word-break properti jika Anda Melakukan Namun hal ini harus terjadi):

lihat pena
bungkus teks: Demonstrasi pembungkusan garis oleh Daniel Schwarz (@mrdanielschwarz)
di CodePen.

text-wrap: nowrap

nowrap Pada dasarnya menonaktifkan pembungkusan teks, menyebabkan luapan jika teks melebihi wadahnya:

lihat pena
bungkus teks: demo nowrap oleh Daniel Schwarz (@mrdanielschwarz)
di CodePen.

text-wrap: balance

Untuk menghindari apa yang disebut “kain buruk”, balance Cobalah untuk memastikan bahwa semua baris teks memiliki panjang yang sama sehingga teks terlihat lebih simetris dan lebih menarik secara visual.

Bagaimanapun, ukuran kotak teks tidak berubah – hanya ukuran garis yang berubah:

lihat pena
bungkus teks: Demo seimbang oleh Daniel Schwarz (@mrdanielschwarz)
di CodePen.

text-wrap: pretty (Dan text-wrap: avoid-short-last-lines)

pretty Cobalah untuk memastikan bahwa pembungkusan teks tidak meninggalkan kata-kata yatim piatu (yaitu, kata-kata yang muncul sendiri di baris terakhir kotak teks). Yatim piatu mudah diabaikan dan oleh karena itu merusak keterbacaan, belum lagi membuat jarak antar elemen yang berdekatan tampak lebih besar dari yang sebenarnya.

text-wrap: pretty Selesaikan semua masalah dengan memastikan baris terakhir memiliki setidaknya dua kata:

lihat pena
bungkus teks: Demo bagus oleh Daniel Schwarz (@mrdanielschwarz)
di CodePen.

Perilaku ini tidak boleh disamakan dengan orphans Properti CSS yang dapat digunakan untuk memastikan seluruh baris Teks tidak menjadi yatim piatu saat didorong ke halaman, rentang, atau kolom baru.
Melihat text-wrap: pretty Tidak ada pengaruhnya terhadap para janda (hanya kata-kata saja Pertama deretan kotak teks).

Agen pengguna telah diinstruksikan untuk mengoptimalkan text-wrap: pretty Tipografi yang baik juga dapat dicapai dengan cara lain. Ini termasuk penyeimbangan garis (mis. atau serupa text-wrap: balance memang) dan mencegah pemutusan kata (terutama jika kata tersebut muncul pada baris yang berurutan dan, di Chrome, di akhir paragraf).

Chrome juga memasukkan perataan teks ke dalam algoritmanya. Ini mungkin diperbaiki oleh agen pengguna di masa depan text-wrap: pretty algoritma. Misalnya, Safari ingin menghindari pencetakan sungai, yang mungkin menarik. Secara keseluruhan, selain mencegah anak yatim piatu, agen pengguna dapat “mempercantik” sesuka mereka.

Penting untuk diingat bahwa tidak ada cara untuk menghindari hasil yang tidak sempurna. Algoritme ini berbasis skor dan pada akhirnya memilih hasil terbaik dengan mempertimbangkan semua faktor.

Jika Anda tidak peduli dengan penyesuaian sekunder dan hanya ingin menghindari anak yatim piatu, text-wrap: avoid-short-last-lines (sebelum text-wrap: avoid-orphans) adalah apa yang Anda cari. Namun, mulai September 2025, ini tidak didukung oleh browser web mana pun. Ini juga dapat berubah, dan sesuai dengan nilainya, ini akan menghindari baris terakhir, bukan hanya baris yatim piatu (yaitu kata tunggal).

Cuplikan kode berikut digunakan @supports at-rule mendeteksi dukungan browser web text-wrap: avoid-short-last-lines,penyataan text-wrap: avoid-short-last-lines Jika didukung dan text-wrap: pretty jika tidak. Ini berarti Anda dapat mulai menggunakan text-wrap: avoid-short-last-lines Setelah tersedia:

article {
  @supports (text-wrap: avoid-short-last-lines) {
    text-wrap: avoid-short-last-lines;
  }
  @supports not (text-wrap: avoid-short-last-lines) {
    text-wrap: pretty;
  }
}

Pada titik ini, pretty Mulai September 2025, Firefox juga tidak mendukung nilai ini. Namun, karena ini merupakan fitur peningkatan progresif, tidak ada salahnya tetap menerapkannya.

text-wrap: stable

stable Untuk teks multi-baris yang dapat diedit pengguna (misalnya, <textarea>s dan elemen contenteditable milik).

Pada dasarnya, ketika pengguna mengedit konten teks, text-wrap: stable Harus dipastikan bahwa pembungkusan teks tidak dihitung ulang sebelum baris sedang diedit. Ini akan mencegah teks bergerak saat mengetik. Secara teoritis, ini juga berguna saat menganimasikan teks, yang juga dapat menyebabkan pergerakan.

Namun, komunitas pengembangan web telah menyetujuinya stable Nilai tidak berfungsi. Setidaknya sekarang, perilakunya sama wrapjadi juri masih belum yakin untuk yang satu ini.

Anda harus menggunakan text-wrap: balance atau text-wrap: pretty?

Setidaknya untuk saat ini, pokok pembicaraannya adalah text-wrap: balance Dan text-wrap: pretty. Meskipun keduanya tampak seperti memperbaiki tipografi tanpa kekurangan apa pun, keduanya sebenarnya memiliki kekurangan yang signifikan, jadi mari kita mulai dengan hal tersebut.

text-wrap: balance Ini intensif secara komputasi sehingga kinerja akan menurun. Oleh karena itu, deklarasi ini tidak berpengaruh pada elemen dengan lebih dari sepuluh baris teks di Firefox dan lebih dari enam baris teks di Chrome.

Safari tidak menerapkan batasan apa pun, dan ini lebih masuk akal mengingat hal tersebut text-wrap: pretty Meskipun melakukan lebih banyak hal, tidak ada batasan (di browser apa pun). Namun, batasan ini tetap ada, dan kita harus mematuhi batasan yang paling ketat, yaitu batasan enam baris Chrome. Meskipun demikian, batasan ini adalah per elemen Dan text-wrap warisan, jadi ini memberi kita kelonggaran:

article {
  text-wrap: balance;
}


<article>
  <!-- We’re allowed six lines of text-wrap: balance here -->
  <p><!-- Another six lines of text-wrap: balance here --></p>
  <p><!-- And another six lines of text-wrap: balance here --></p>
</article>

Namun, jika suatu elemen mengandung tujuh baris atau lebih, maka elemen tersebut cukup jelas text-wrap: balance akan gagal dijalankan dan akan kembali ke default text-wrap: wrap. Itu sebabnya yang terbaik adalah menggunakan…

• text-wrap: balance Digunakan untuk cuplikan teks pendek (seperti judul) dan…
• text-wrap: pretty untuk paragraf (karena tidak memiliki batasan)

Tapi harap diingat, text-wrap: pretty Masih cukup berat (sayangnya permainan kata-kata itu dimaksudkan) dan mempengaruhi kinerja. Berapa banyak dan apa yang harus dianggap “penggunaan berlebihan” tidak sepenuhnya jelas. Mudah-mudahan agen pengguna akan memberikan kejelasan atau menyempurnakan pembatasan di beberapa titik.

Apa manfaat pengalaman pengguna? text-wrap: balance Dan text-wrap: pretty?

Saya telah menyebutkan manfaat pengalaman pengguna text-wrap: balance Dan text-wrap: pretty Sudah, tapi mari kita buat cadangan dan klarifikasi:

Penyeimbangan garisgram

Penyeimbangan garis, inilah fungsi utamanya text-wrap: balance (apa lagi text-wrap: pretty (sampai batas yang tidak diketahui), memberi pengguna panjang garis yang lebih dapat diprediksi dan meningkatkan keterbacaan. Ini juga menarik secara visual.

menghindari anak yatim

Hindari yatim piatu/baris terakhir (a text-wrap: pretty fungsi) juga meningkatkan keterbacaan karena lebih sulit diperhatikan dibandingkan seluruh baris. Mereka juga secara visual tidak menarik karena membuat jarak antar elemen yang berdekatan tampak lebih besar dari yang sebenarnya.

Cegah jeda kata

Cegah pemutusan kata (juga text-wrap: pretty function) juga meningkatkan keterbacaan, karena tanda hubung jelas lebih sulit dibaca. Hal ini terutama berlaku jika fragmen pertama berada di ujung sumbu sebaris dan fragmen kedua berada di awal (sebenarnya keduanya berjauhan), meskipun tanda hubung menunjukkan hubungannya.

Hilangkan sungai percetakan

Sungai yang tercetak dapat mengganggu secara visual, itulah sebabnya Safari (setidaknya) ingin menghilangkannya dengan: text-wrap: pretty. Sulit untuk menggambarkan apa sebenarnya Print Rivers, tetapi gambar di bawah (dari artikel WebKit yang mereka bicarakan) text-wrap: pretty) menunjukkannya dengan baik (maaf):

pendeknya, text-wrap: balance Dan text-wrap: pretty Tingkatkan keterbacaan, elemen kunci dari kegunaan, aksesibilitas, dan pengalaman pengguna yang baik secara keseluruhan.

apa yang harus dilakukan ch dampak satuan text-wrap?

1ch sama dengan lebar 0 Mesin terbang dirender pada ukuran font yang dihitung menggunakan keluarga font terhitung, begitu juga dengan lebar yang dirender 0 Ya 12px Kemudian width: 63ch akan benar-benar menghitung width: 756px. ini Bisa Baris dibatasi hingga 63 karakter, namun tidak dijamin.

pendeknya, ch Unit tidak melakukan apa yang Anda kira akan mereka lakukan. ch unit diterapkan pada elemen (misalnya, ukuran sebarisnya), sedangkan text-wrap Mempengaruhi garis di dalamnya. Anda dapat menggunakannya bersama-sama, tetapi keduanya tidak terlalu berkaitan.

Ini adalah sebuah paket!

ini text-wrap Properti CSS meningkatkan tipografi, khususnya balance Dan pretty nilai-nilai dan mungkin itu avoid-short-last-lines nilai pada saat tertentu. Secara khusus, mereka meningkatkan keterbacaan dengan menyeimbangkan garis, menghindari garis yatim piatu/baris terakhir yang pendek, dan mencegah tanda hubung dan sungai tipografi.

Namun, pengoptimalan ini memerlukan daya komputasi yang lebih besar dibandingkan properti CSS normal, sehingga dapat memengaruhi performa dalam beberapa cara. Namun, untuk meringankan dampaknya, agen pengguna memberlakukan beberapa batasan, meskipun batasan ini tidak konsisten di berbagai browser web dan tidak masuk akal. Misalnya, text-wrap: pretty Tampaknya ada banyak optimasi untuk pembungkusan teks, tapi tidak setiap membatasi. Aneh, tapi mungkin bukan itu yang perlu dikhawatirkan oleh kami para pengembang.

Punya wawasan atau pertanyaan? Letakkan di bagian komentar di bawah dan terima kasih telah membaca!