CSS text-wrap: balance

Teknik tipografi klasik untuk membuat jeda baris secara manual untuk blok teks yang seimbang, kini hadir di CSS.

Adam Argyle

Nilai balance untuk text-wrap adalah bagian dari CSS Text Level 4. Lihat contoh dalam postingan ini untuk mempelajari cara satu baris CSS ini dapat meningkatkan tata letak teks Anda secara signifikan.

Tanpa text-wrap: balance; desainer, editor konten, dan penayang memiliki beberapa alat untuk mengubah cara penyeimbangan baris. Opsi terbaik yang tersedia adalah menggunakan <wbr> atau ­ untuk membantu memandu tata letak teks ke keputusan yang lebih cerdas tentang tempat memisahkan baris dan kata.

Sebagai developer, Anda tidak mengetahui ukuran akhir, ukuran font, atau bahkan bahasa judul atau paragraf. Semua variabel yang diperlukan untuk penanganan pengemasan teks yang efektif dan estetis ada di browser. Inilah alasan kita melihat pengemasan judul seperti pada gambar berikut:

.unbalanced {
  max-inline-size: 50ch;
}

Dengan text-wrap: balance dari CSS Text 4, Anda dapat meminta browser untuk mencari tahu solusi pelengkapan baris yang paling seimbang untuk teks. Browser mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan. Hasil pelengkapan teks seimbang browser terlihat seperti ini saat ini:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Sebaiknya lihat secara berdampingan, dalam keadaan diam, dan tanpa informasi debug yang ditampilkan.

Mata Anda akan jauh lebih senang dengan blok teks yang seimbang. Blok teks ini lebih menarik perhatian dan secara keseluruhan lebih mudah dibaca.

Menemukan keseimbangan

Judul adalah hal pertama yang dilihat pembaca; judul harus menarik secara visual dan mudah dibaca. Hal ini menarik perhatian pengguna dan memberikan kesan kualitas dan kepastian. Tipografi yang baik memberikan kepercayaan diri kepada pembaca, sehingga mendorong mereka untuk terus membaca.

Biasanya tugas ini dilakukan secara manual, atau secara optik, karena desainer yang menyeimbangkan teks ingin memuaskan mata, bukan matematika. Topik ini sering disebut sebagai keselarasan metrik versus optik. Untuk publikasi besar seperti New York Times, keseimbangan judul adalah detail pengalaman pengguna yang sangat penting.

Menyeimbangkan teks dalam tipografi sudah ada sejak awal pencetakan, ketika pencetak menempatkan huruf secara manual. Seiring berkembangnya alat dan teknik, hasilnya juga ikut berkembang. Saat ini, desainer memiliki warna, ketebalan, ukuran, dan lainnya, untuk menyeimbangkan teks dalam desain mereka.

Namun, di web, kontrol yang tersedia lebih sedikit karena ukuran dan warna dokumen berubah berdasarkan pengguna. text-wrap: balance menghadirkan seni penyeimbangan teks ke web secara otomatis, yang dibangun berdasarkan karya dan tradisi desainer dari industri cetak.

Judul seimbang

Ini akan, dan harus, menjadi kasus penggunaan utama untuk text-wrap: balance. Tarik perhatian dengan ukuran dan buat simetris serta mudah dibaca. Setel semua judul ke pelengkapan teks yang seimbang dengan CSS berikut:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Menerapkan gaya ini saja mungkin tidak memberikan hasil yang Anda harapkan, karena teks perlu di-wrap dan oleh karena itu harus memiliki panjang baris maksimum yang diterapkan dari suatu tempat. Anda akan melihat set max-inline-size pada contoh dalam postingan ini. Gaya ini seperti max-width, tetapi dapat ditetapkan sekali untuk bahasa apa pun.

Batasan

Tugas menyeimbangkan teks tidak gratis. Browser perlu mengulangi iterasi untuk menemukan solusi pelipatan yang seimbang dan terbaik. Biaya performa ini diredam oleh aturan, hanya berfungsi untuk enam baris yang digabungkan dan di bawahnya.

Pertimbangan performa

Sebaiknya jangan menerapkan penyeimbangan text-wrap ke seluruh desain Anda. Hal ini merupakan permintaan yang sia-sia, karena batas enam baris, dan dapat memengaruhi kecepatan rendering halaman.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Keunggulan besar fitur ini adalah Anda tidak perlu menunggu dan mengatur waktu penyeimbangan pelengkapan teks dengan pemuatan font, seperti yang mungkin Anda lakukan dengan JavaScript saat ini. Browser akan menanganinya.

Interaksi dengan properti white-space

Teks yang seimbang bersaing dengan properti white-space karena yang satu meminta agar tidak ada pelipatan dan yang lainnya meminta pelipatan yang seimbang. Atasi hal ini dengan membatalkan setelan properti ruang kosong, lalu pelipatan yang seimbang dapat diterapkan lagi.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

Penyeimbangan tidak akan mengubah ukuran sebaris elemen

Ada keuntungan dari beberapa solusi JavaScript untuk pelengkapan teks yang seimbang, karena solusi tersebut mengubah max-width dari elemen penampung itu sendiri. Hal ini memiliki keuntungan tambahan karena "dibalut" ke blok yang seimbang. text-wrap: balance tidak memiliki efek ini dan dapat dilihat dalam contoh ini:

Lihat bagaimana lebar yang ditampilkan dari DevTools memiliki banyak ruang kosong di bagian akhir? Hal ini karena hanya gaya pembungkus, bukan gaya pengubah ukuran. Oleh karena itu, ada beberapa skenario di mana text-wrap: balance tidak terlalu bagus, setidaknya menurut pendapat saya. Misalnya, judul di dalam kartu (atau penampung apa pun dengan batas atau bayangan).

Pelengkapan teks yang seimbang justru menciptakan ketidakseimbangan pada elemen yang disertakan.

Penjelasan singkat tentang teknik yang digunakan browser

Browser secara efektif melakukan penelusuran biner untuk lebar terkecil yang tidak menyebabkan garis tambahan, berhenti pada satu piksel CSS (bukan piksel tampilan). Untuk meminimalkan langkah-langkah dalam penelusuran biner, browser dimulai dengan 80% dari lebar garis rata-rata.