Teknik tipografi klasik pada jeda baris yang ditulis tangan untuk blok teks yang seimbang, hadir di CSS.
Nilai balance
untuk text-wrap
adalah bagian dari Teks CSS Level 4. Lihat contoh dalam postingan ini untuk mempelajari bagaimana
satu baris CSS ini dapat meningkatkan tata letak teks Anda secara signifikan.
Tanpa text-wrap: balance
; desainer, editor konten, dan penerbit memiliki
beberapa alat
untuk mengubah keseimbangan baris. Opsi terbaik yang tersedia adalah menggunakan
<wbr>
atau
­
untuk membantu
memandu tata letak teks agar mengambil keputusan yang lebih cerdas terkait 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 teks yang efektif dan estetik terdapat di dalam browser. Inilah sebabnya kita melihat penggabungan judul seperti dalam gambar berikut:
![Judul disorot dengan DevTools, membentang selebar penuh ruang inline, dan memiliki dua kata menggantung di baris kedua.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=6&hl=id)
.unbalanced {
max-inline-size: 50ch;
}
Dengan text-wrap: balance
dari CSS Text 4, Anda dapat meminta browser untuk
menemukan solusi penggabungan baris terbaik yang seimbang untuk teks. Browser
mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan.
Hasil pengemasan teks seimbang browser terlihat seperti ini hari ini:
![Judul disorot seperti DevTools sebelumnya, kali ini tidak mencakup lebar penuh. Baris baru ini dimulai sebelum akhir, sehingga menjadi blok teks yang seimbang.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=6&hl=id)
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Akan sangat membantu untuk melihat semuanya secara berdampingan, diam, dan tanpa informasi debug yang dihamparkan.
Mata Anda akan jauh lebih puas dengan blok teks yang seimbang. Warna ini menarik perhatian dengan lebih baik dan secara keseluruhan lebih mudah dibaca.
Menemukan keseimbangan
Judul adalah hal pertama yang dilihat oleh pembaca; judul harus menarik secara visual dan mudah dibaca. Hal ini akan menarik perhatian pengguna dan memberikan kesan kualitas dan jaminan. Tipografi yang baik akan memberikan kepercayaan diri kepada pembaca, sehingga mendorong mereka untuk terus membaca.
Biasanya, tugas ini dilakukan dengan tangan, atau secara optik, karena desainer menyeimbangkan teks ingin menyenangkan mata, bukan perhitungan. Topik ini sering disebut sebagai metrik versus penyelarasan optik. Untuk publikasi besar seperti New York Times, penyeimbangan judul adalah detail pengalaman pengguna yang sangat penting.
Menyeimbangkan teks dalam tipografi dimulai dari masa-masa awal pencetakan, saat printer akan meletakkan huruf. Seiring berkembangnya alat dan teknik, hasilnya pun demikian. Saat ini, desainer memiliki warna, ketebalan, ukuran, dan banyak lagi, untuk menyeimbangkan teks dalam desain mereka.
Namun, di web, kontrol yang tersedia hanya sedikit karena dokumen berubah ukuran dan warna berdasarkan pengguna. text-wrap: balance
menghadirkan seni
menyeimbangkan teks ke web secara otomatis, yang dikembangkan berdasarkan karya dan
tradisi desainer dari industri cetak.
Judul seimbang
Ini akan, dan seharusnya menjadi, kasus penggunaan utama untuk text-wrap: balance
. Gambar
mata dengan ukuran dan buat agar simetris dan mudah dibaca oleh mata. Tetapkan semua judul ke pengemasan teks seimbang dengan CSS berikut:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
Hanya menerapkan gaya ini mungkin tidak memberikan hasil yang Anda harapkan, karena
teks perlu digabungkan dan, oleh karena itu, memiliki panjang baris maksimum yang diterapkan
dari suatu tempat. Anda akan melihat
max-inline-size
yang ditetapkan pada contoh di postingan ini. Gaya ini seperti max-width
, tetapi dapat disetel satu kali
untuk bahasa apa pun.
Batasan
Tugas menyeimbangkan teks tidaklah gratis. Browser perlu melakukan loop over iterasi untuk menemukan solusi penggabungan terbaik yang seimbang. Biaya performa ini dimitigasi oleh suatu aturan, dan hanya berfungsi untuk enam baris gabungan dan kurang.
Pertimbangan performa
Sebaiknya jangan menerapkan penyeimbangan {i>text-wrap<i} ke seluruh desain Anda. Ini adalah permintaan yang terbuang, karena batas enam baris, dan dapat memengaruhi kecepatan render halaman.
* { text-wrap: balance; }
h1, h2, h3, h4, h5, h6, blockquote { text-wrap: balance; }
Keuntungan besar untuk fitur ini adalah Anda tidak perlu menunggu dan mengatur waktu text wrap balancing dengan pemuatan font, seperti yang mungkin Anda lakukan dengan JavaScript saat ini. Browser akan menanganinya.
Interaksi dengan properti white-space
Teks balancing akan bersaing dengan properti
white-space
karena yang satu meminta tidak ada penggabungan dan yang lainnya meminta
penggabungan yang seimbang. Atasi hal ini dengan membatalkan penetapan properti ruang kosong, maka penggabungan yang seimbang dapat diterapkan lagi.
.balanced {
white-space: unset;
text-wrap: balance;
}
Menyeimbangkan tidak akan mengubah ukuran elemen yang {i>inline<i}
Ada keuntungan dari beberapa solusi JavaScript untuk penggabungan teks
seimbang, karena solusi ini mengubah max-width
dari elemen yang memuatnya sendiri. Ini
memiliki bonus tambahan yaitu “dibungkus rapi” 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 ekstra di bagian akhir?
Itu karena itu hanya gaya pembungkusan, bukan gaya perubahan ukuran. Karena
hal ini, ada beberapa skenario saat text-wrap: balance
tidak terlalu bagus, setidaknya menurut saya. Misalnya, judul di dalam kartu (atau penampung apa pun dengan batas atau bayangan).
Pembungkus teks yang berimbang secara ironis menciptakan ketidakseimbangan pada elemen yang ada di dalamnya.
Penjelasan singkat tentang teknik yang digunakan browser
Browser secara efektif melakukan penelusuran biner untuk lebar terkecil yang tidak menyebabkan garis tambahan, dengan berhenti pada satu piksel CSS (bukan piksel tampilan). Untuk lebih meminimalkan langkah dalam penelusuran biner, browser memulai dengan 80% lebar garis rata-rata.