Teknik tipografi klasik berupa jeda baris penulisan 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 dan penerbit konten memiliki
beberapa alat
untuk mengubah keseimbangan desain. Opsi terbaik yang tersedia adalah menggunakan
<wbr>
atau
­
untuk membantu
memandu tata letak teks agar dapat mengambil keputusan yang lebih cerdas terkait letak pemisahan baris dan kata.
Sebagai developer, Anda tidak mengetahui ukuran akhir, ukuran font, atau bahkan bahasa judul atau paragraf. Semua variabel yang diperlukan untuk melakukan pengemasan teks yang efektif dan estetika, ada di browser. Inilah sebabnya kita melihat penggabungan headline 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 penggabungan baris terbaik yang seimbang untuk teks tersebut. Browser
mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan.
Hasil penggabungan teks yang diseimbangkan dengan browser terlihat seperti ini sekarang:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
Akan sangat membantu untuk melihatnya secara berdampingan, diam, dan tanpa overlay informasi debug.
Mata Anda akan lebih senang dengan blok teks yang seimbang. Ini menarik perhatian dengan lebih baik dan secara keseluruhan lebih mudah dibaca.
Menemukan keseimbangan
Judul adalah hal pertama yang dilihat pembaca; mereka harus menarik secara visual dan mudah dibaca. Hal ini menarik perhatian pengguna dan memberikan kesan kualitas dan jaminan. Tipografi yang baik memberikan kepercayaan diri kepada pembaca, sehingga mendorong mereka untuk terus membaca.
Secara tradisional, tugas ini dilakukan dengan tangan, atau secara optik, karena desainer yang menyeimbangkan teks ingin menyenangkan mata, bukan matematika. 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 berasal dari masa awal pencetakan, saat printer akan menyerahkan huruf. Seiring berkembangnya alat dan teknik, hasilnya pun ikut berkembang. Saat ini, desainer memiliki warna, bobot, ukuran, dan banyak lagi, untuk menyeimbangkan teks dalam desain mereka.
Namun, di web, kontrol yang tersedia kurang karena dokumen mengubah ukuran dan warna berdasarkan pengguna. text-wrap: balance
menghadirkan seni
menyeimbangkan teks ke web secara otomatis, yang dibangun berdasarkan karya dan
tradisi desainer dari industri cetak.
Judul saldo
Ini akan, dan seharusnya menjadi, kasus penggunaan utama untuk text-wrap: balance
. Gambar
mata menggunakan ukuran dan buat agar simetris dan dapat dibaca oleh mata. Tetapkan
semua judul ke penggabungan teks yang 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 harus digabungkan sehingga memiliki panjang baris maksimum yang diterapkan dari
suatu tempat. Anda akan melihat
max-inline-size
ditetapkan pada contoh dalam postingan ini, gaya ini seperti max-width
, tetapi dapat ditetapkan
sekali untuk bahasa apa pun.
Batasan
Tugas menyeimbangkan teks tidak bebas. Browser harus melakukan iterasi berulang untuk menemukan solusi penggabungan yang seimbang terbaik. Biaya performa ini dimitigasi oleh aturan, dan hanya berfungsi untuk enam baris yang digabungkan ke bawah.
Pertimbangan performa
Sebaiknya jangan menerapkan penyeimbangan text-wrap ke seluruh desain Anda. Permintaan ini sia-sia, 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 pengemasan teks dengan pemuatan font, seperti yang mungkin Anda lakukan dengan JavaScript sekarang. Browser akan menanganinya!
Interaksi dengan properti white-space
Teks yang seimbang akan bersaing dengan properti
white-space
karena salah satu meminta untuk tidak melakukan penggabungan dan yang lain meminta
penggabungan yang seimbang. Atasi ini dengan membatalkan penetapan properti ruang putih, kemudian penggabungan seimbang dapat diterapkan lagi.
.balanced {
white-space: unset;
text-wrap: balance;
}
Penyeimbangan tidak akan mengubah ukuran inline elemen
Ada keuntungan bagi beberapa solusi JavaScript untuk penggabungan teks
yang seimbang, karena dapat mengubah max-width
elemen penampung itu sendiri. Hal ini
memiliki bonus tambahan karena "shrink wrapped" ke blok yang seimbang. text-wrap:
balance
tidak memiliki efek ini dan dapat dilihat dalam contoh berikut:
Lihat bagaimana lebar yang ditampilkan dari DevTools memiliki banyak ruang ekstra di bagian akhir?
Hal itu karena hanya gaya penggabungan, bukan gaya yang berubah ukuran. Karena
itu, ada beberapa skenario saat text-wrap: balance
tidak begitu bagus, setidaknya menurut saya. Misalnya, judul di dalam kartu (atau penampung apa pun
dengan batas atau bayangan).
Pembungkus teks yang seimbang secara ironis menciptakan ketidakseimbangan terhadap elemen yang ditampung.
Penjelasan singkat tentang teknik yang digunakan browser
Browser secara efektif melakukan penelusuran biner untuk lebar terkecil yang tidak menyebabkan baris tambahan, dan berhenti di satu piksel CSS (bukan piksel tampilan). Untuk meminimalkan langkah-langkah dalam penelusuran biner lebih lanjut, browser memulai dengan 80% dari lebar garis rata-rata.