Penggabungan teks CSS: keseimbangan

Teknik tipografi klasik pada jeda baris yang ditulis tangan untuk blok teks yang seimbang, hadir di CSS.

Adam Argyle

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

Tanpa text-wrap: balance; desainer, editor konten, dan penerbit memiliki beberapa alat untuk mengubah keseimbangan garis.. Opsi terbaik yang tersedia adalah menggunakan <wbr> atau ­ untuk membantu memandu tata letak teks menjadi keputusan yang lebih cerdas tentang di mana harus memisahkan baris dan kata.

Sebagai pengembang, Anda tidak tahu ukuran akhir, ukuran {i>font<i}, atau bahkan bahasa teks judul atau paragraf. Semua variabel yang dibutuhkan untuk sebuah estetika dan perlakuan terhadap pengemasan teks, yaitu di browser. Inilah sebabnya kita melihat judul penggabungan seperti dalam gambar berikut:

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

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

.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. Skor ini mengambil menarik perhatian dengan lebih baik dan secara keseluruhan lebih mudah dibaca.

Menemukan keseimbangan

Judul adalah hal pertama yang dilihat pembaca; visualisasi itu harus menarik secara visual dan mudah dibaca. Hal ini menarik perhatian pengguna dan memberikan rasa kualitas dan {i>assurance<i} (penjaminan) tertentu. Tipografi yang baik memberikan kepercayaan diri kepada pembaca, mendorong mereka untuk lanjutkan membaca.

Secara tradisional, tugas ini dilakukan dengan tangan, atau secara optik, sebagai desainer menyeimbangkan teks ingin menyenangkan mata, bukan perhitungan. Topik ini sering 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-masa awal pencetakan, saat {i>printer<i} akan meletakkan huruf. Seiring berkembangnya alat dan teknik, hasilnya pun demikian. Saat ini, desainer memiliki warna, berat, ukuran, dan banyak lagi, untuk menyeimbangkan teks dalam desain mereka.

Namun di web, kontrol yang tersedia hanya lebih sedikit karena perubahan dokumen ukuran dan warna berdasarkan pengguna. text-wrap: balance menghadirkan seni menyeimbangkan teks ke web secara otomatis, melakukan pekerjaan dan tradisi desainer dari industri percetakan.

Judul seimbang

Ini akan, dan seharusnya menjadi, kasus penggunaan utama untuk text-wrap: balance. Tarik mata dengan ukuran dan membuatnya simetris dan mudah dibaca oleh mata. Setel semua judul menjadi teks seimbang yang dibungkus 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 dan oleh karena itu memiliki panjang baris maksimum yang diterapkan dari di suatu tempat. Anda akan melihat max-inline-size ditetapkan pada contoh dalam postingan ini, gaya ini seperti max-width tetapi dapat disetel sekali untuk bahasa apa pun.

Batasan

Tugas menyeimbangkan teks tidaklah gratis. Browser perlu melakukan loop iterasi untuk menemukan solusi penggabungan yang terbaik dan seimbang. Performa ini biaya 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 pemborosan permintaan, 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 pembungkus teks (text wrap) menyeimbangkan dengan pemuatan {i>font<i}, seperti yang mungkin Anda lakukan dengan JavaScript saat ini. Tujuan browser akan menanganinya!

Interaksi dengan properti white-space

Teks balancing akan bersaing dengan white-space properti karena yang satu meminta tidak melipat dan yang lainnya meminta penggabungan yang seimbang. Atasi hal ini dengan membatalkan setelan properti {i>white space<i}, lalu {i> balanced wrapping <i} dapat diterapkan lagi.

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

Menyeimbangkan tidak akan mengubah ukuran elemen yang {i>inline<i}

Beberapa solusi JavaScript memiliki keuntungan untuk teks seimbang menggabungkan, karena mengubah max-width dari elemen penampung itu 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 Ada beberapa skenario saat text-wrap: balance tidak terlalu bagus, di paling tidak 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 pencarian biner untuk lebar terkecil yang tidak menyebabkan garis tambahan, berhenti di satu piksel CSS (bukan ditampilkan piksel). Untuk lebih meminimalkan langkah-langkah dalam penelusuran biner, browser memulai dengan 80% dari lebar garis rata-rata.