Meningkatkan Tata Letak dan Keterbacaan Teks

Fitur web: text-wrap: balance text-wrap: pretty

Tata letak teks, terutama di akhir baris dan akhir paragraf, dapat memengaruhi keterbacaan dan daya tarik estetika halaman. CSS menyediakan beberapa opsi pengemasan teks yang dapat meningkatkan kasus penggunaan tertentu.

Untuk blok teks pendek seperti judul, gunakan text-wrap: balance. Properti ini menginstruksikan browser untuk mendistribusikan teks seimbang mungkin di seluruh baris, sehingga menciptakan tampilan yang lebih simetris.

Properti CSS text-wrap: pretty memungkinkan Anda meningkatkan kualitas tipografi teks isi dengan mengaktifkan algoritma penggabungan yang lebih canggih. Fitur ini dirancang khusus untuk mencegah "orphan" (kata tunggal di baris terakhir paragraf) dan membuat "rag" visual yang lebih menarik untuk blok teks yang panjang.

Penerapan

1. Mengidentifikasi elemen teks:

Untuk text-wrap: balance, pilih blok teks pendek seperti judul dan header tabel. Hindari elemen yang memiliki kotak yang terlihat seperti batas atau latar belakang, karena hal ini dapat membuat area kosong secara visual yang tidak terduga dalam tata letak.

Untuk text-wrap: pretty, pilih elemen yang berpotensi berisi teks panjang yang menampilkan kata yatim piatu (runt) atau pemisah baris yang buruk. Hal ini mencakup elemen berikut:

  • <p>
  • <blockquote>
  • <li>
  • Elemen lain yang berpotensi berisi teks panjang.

Memilih Metode Pengemasan yang Tepat

Kriteria text-wrap: balance text-wrap: pretty text-wrap: wrap (Default)
Paling Cocok Untuk Blok pendek (Judul, Judul) Blok panjang (Paragraf, Daftar) Konten yang penting untuk performa
Sasaran Visual Panjang garis simetris Menghindari baris yatim ("runt") Pengemasan standar yang cepat
Batasan Garis Hingga 6–10 baris (batas algoritma) Terbaik untuk 3 hingga banyak baris Tak terbatas
Biaya Perf Tinggi: Algoritme penelusuran biner Sedang: Algoritma lihat balik Rendah: Algoritma greedy standar

2. Terapkan pengemasan yang dipilih:

Terapkan text-wrap: balance secara khusus ke elemen pendek multibaris seperti judul (h1-h6), subjudul, atau kutipan.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Gunakan text-wrap: pretty untuk mengaktifkan algoritma yang dioptimalkan yang mengevaluasi beberapa baris terakhir paragraf untuk menemukan titik pemisah terbaik.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Batasan dan Performa Penting

text-wrap: balance

  • Batas Baris: Browser menerapkan batas pada jumlah baris yang akan diseimbangkan untuk mempertahankan performa (biasanya 6 baris di Chromium dan 10 baris di Firefox). Jika teks melebihi batas ini, browser akan kembali ke perilaku wrap standar. Hindari penggunaan text-wrap: balance pada blok teks yang kemungkinan akan melebihi batas ini.
  • Penerapan yang Ditargetkan: JANGAN terapkan text-wrap: balance secara global (misalnya, * { text-wrap: balance; }). Algoritma "penelusuran biner" iteratif yang digunakan oleh browser memerlukan komputasi yang mahal. Batasi penggunaannya pada elemen teks tertentu yang pendek.
  • Interaksi dengan Lebar: text-wrap: balance tidak mengubah lebar penampung (inline-size). Properti ini hanya memengaruhi cara pengemasan teks dalam lebar tersebut. Hal ini dapat menyisakan ruang kosong di akhir penampung, yang dapat memengaruhi tata letak yang mengandalkan blok teks lebar penuh.

text-wrap: pretty

  • Performa vs. Kualitas: WAJIB: text-wrap: pretty memerlukan komputasi yang lebih berat daripada algoritma wrap (greedy) default karena mengevaluasi beberapa baris (biasanya empat baris terakhir) untuk mengoptimalkan titik pemisah. Hindari menerapkannya secara global ke setiap elemen jika halaman Anda memiliki jumlah konten teks yang sangat banyak.
  • Terbaik untuk teks multibaris: Manfaat pretty paling terlihat dalam paragraf yang terdiri dari tiga baris atau lebih. Fitur ini memiliki sedikit atau tidak ada efek pada teks pendek satu baris.
  • Perilaku khusus browser: Perhatikan bahwa detail implementasi bervariasi. Browser berbasis Chromium biasanya berfokus pada empat baris terakhir, sedangkan mesin lain mungkin mengevaluasi seluruh paragraf.

Strategi penggantian

Di browser yang tidak mendukung text-wrap: balance atau text-wrap: pretty, properti akan diabaikan, dan teks akan digabungkan menggunakan perilaku wrap default. Ini adalah progressive enhancement yang menurun secara halus ke tipografi standar. Hal ini memastikan bahwa konten Anda tetap dapat dibaca dengan sempurna di semua browser sekaligus memberikan pengalaman yang lebih baik kepada pengguna yang mendukungnya.

Untuk tata letak penting yang memerlukan tata letak teks yang disempurnakan, gunakan library JavaScript, tetapi perlu diketahui bahwa hal ini mungkin lambat dan menyebabkan masalah performa.