Menghadirkan tipografi yang lebih baik dengan `text-wrap: pretty`

• Sekilas tentang text-wrap: pretty, yang membuat tipografi web menjadi lebih indah
• Fitur yang baru diperkenalkan di Safari Technology Preview 216 ini menyempurnakan tipografi web agar lebih presisi dan mudah dibaca
• Tata letak teks web sebelumnya diproses satu baris pada satu waktu, tetapi pretty menyesuaikan posisi pemenggalan baris dengan mempertimbangkan seluruh paragraf
• Fitur ini meningkatkan keterbacaan dan aksesibilitas, serta diimplementasikan dengan inspirasi dari metode penyusunan huruf tradisional

Cara pemenggalan baris yang baik, belajar dari tipografi tradisional

• Menghindari baris terakhir yang terlalu pendek: menyisakan hanya satu kata di baris terakhir tidak enak dilihat secara estetis
• Memperbaiki bentuk akhir paragraf yang kasar: jika ujung baris terlalu bergerigi, keterbacaan menurun, jadi perlu diseimbangkan sebisa mungkin
• Menghindari penggunaan tanda hubung yang buruk: jika tanda hubung muncul di dua baris berturut-turut atau kata terlalu sering dipecah, teks jadi sulit dibaca
• Mencegah river dalam tipografi: fenomena ketika celah antarkata tersusun vertikal dan mengganggu pandangan sebaiknya dihindari

Sejarah cara pemenggalan baris di web

• Sejak 1991, web menggunakan pendekatan "memproses satu baris demi satu baris mulai dari baris pertama"
• Pendekatan ini menghitung panjang teks setiap baris secara terpisah dan tidak mempertimbangkan harmoni antarbari s
• Alat seperti InDesign atau LaTeX merapikan baris dengan melihat seluruh paragraf, tetapi web belum mampu melakukannya hingga baru-baru ini
• Safari Technology Preview 216 untuk pertama kalinya memperkenalkan metode pemenggalan baris yang mempertimbangkan seluruh paragraf

Masalah yang diselesaikan oleh text-wrap: pretty

• Mengevaluasi seluruh paragraf untuk menentukan posisi pemenggalan baris yang optimal
• Mencegah baris terakhir yang pendek, memperbaiki bentuk ujung baris (rag), dan mengurangi penggunaan tanda hubung yang tidak perlu
• Browser berbasis Chromium hanya memperbaiki 4 baris terakhir paragraf, sedangkan WebKit menerapkannya ke seluruh paragraf
• Fenomena river belum diperbaiki, tetapi ada rencana untuk menambahkannya di masa depan

Perbedaan implementasi di tiap browser

• pretty dapat bekerja berbeda di tiap browser sesuai definisi CSS Working Group
• WebKit menerapkannya ke seluruh paragraf, Chromium hanya ke 4 baris terakhir
• Karena itu, pengembang sebaiknya tidak memakainya hanya untuk memperbaiki baris terakhir, tetapi juga untuk meningkatkan kualitas tipografi secara keseluruhan

Lihat demonya

• Di demo CodePen, Anda dapat bereksperimen dengan kombinasi pretty, balance, tanda hubung, perataan, dan lainnya
• Aktifkan "show guides" dan "show ghosts" untuk membandingkan sebelum dan sesudah perubahan
• Efeknya dapat dilihat dalam berbagai bahasa (Inggris, Arab, Jerman, Tionghoa, Jepang)

Menjawab kekhawatiran soal performa

• Pada konten dengan sangat banyak baris, performa bisa terpengaruh, tetapi untuk paragraf biasa tidak ada masalah performa
• Anda dapat menggunakannya dengan bebas selama bukan paragraf dengan ratusan hingga ribuan baris
• Jika diperlukan, WebKit berencana memproses paragraf panjang dengan membaginya agar performa tetap terjaga

Perbedaan pretty dan balance

• pretty menjaga agar teks tetap memenuhi lebar kontainer sambil membuat pemenggalan baris terasa lebih alami
• balance berfokus menyamakan panjang semua baris, sehingga kontainer akan terisi lebih sedikit
• Secara umum, pretty cocok untuk teks isi, sedangkan balance cocok untuk judul, caption, dan teks teaser
• Keduanya bisa dipakai untuk teks pendek, tetapi untuk isi teks yang panjang sebaiknya hindari balance

Penjelasan nilai properti text-wrap lainnya

text-wrap: avoid-short-last-lines

• Nilai baru yang ditambahkan ini hanya berfokus untuk menghindari baris terakhir yang pendek
• Belum diimplementasikan di browser mana pun

text-wrap: auto

• Nilai bawaan yang menggunakan algoritma "greedy line breaking" berbasis baris yang telah dipakai sejak 1991
• Ke depannya, nilai bawaan ini sendiri mungkin akan ditingkatkan oleh browser

text-wrap: stable

• Saat ini berperilaku sama seperti auto, tetapi memberikan pemenggalan baris yang stabil dan cocok untuk teks yang bisa diedit
• Menjamin pemenggalan baris tidak berubah selama animasi atau saat input teks berlangsung

Properti turunan text-wrap

• text-wrap sebenarnya adalah bentuk singkat dari dua properti: text-wrap-mode dan text-wrap-style

• text-wrap-mode: mengatur apakah pemenggalan baris diizinkan (wrap / nowrap)

• text-wrap-style: memilih algoritma pemenggalan baris (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• Saat digunakan bersama properti white-space, cara penanganan spasi juga perlu diperiksa

Ringkasan

• text-wrap: pretty memungkinkan pemenggalan baris teks web yang jauh lebih canggih dibanding sebelumnya
• Di Safari Technology Preview 216, fitur ini diimplementasikan dengan metode evaluasi seluruh paragraf
• Bahkan saat diterapkan pada isi teks yang panjang, hampir tidak ada masalah performa, dan peningkatannya besar dari sisi keterbacaan maupun estetika
• Penting untuk memahami perbedaannya dengan balance dan memilihnya sesuai jenis konten

[GN⁺]

Komentar Hacker News

• Agak lucu mendengar banyak pengembang khawatir soal performa "text-wrap: pretty". Sulit percaya ada begitu banyak pengembang yang benar-benar mempertimbangkan performa pembungkusan teks
• Konten demonya menggunakan bahasa Inggris. Bahasa Inggrisnya aneh. Tidak terkait dengan topiknya, kecuali jika tujuannya memang menyusun ulang kata untuk memperbaiki pergantian baris
• Saya berharap fitur ini ditambahkan ke ereader. Ereader punya layout engine yang kurang bagus
• Terlalu sedikit usaha dan perhatian yang dicurahkan untuk membuat teks online terlihat indah. Web telah membawa teks mundur berabad-abad. Fitur ini patut disambut
• Dukungan untuk "text-wrap: pretty" telah ditambahkan ke Safari Technology Preview dan menghadirkan tingkat kehalusan yang belum pernah ada sebelumnya untuk tipografi web. Menurut caniuse.com, Chrome sudah mendukung fitur ini sejak September 2023. Sulit memahami apa yang dimaksud dengan "belum pernah ada sebelumnya"
• Ada yang tahu perbedaan antara "text-align: justify" dan "text-wrap: pretty"? Di Chrome, "text-wrap: pretty" memberi efek yang jauh lebih halus. Saya mengecek apakah bagus menggunakan keduanya pada isi utama blog pada umumnya, dan tampaknya masing-masing memberi perubahan tersendiri
• Fitur ini luar biasa. Tidak mengejutkan kalau fokusnya ada pada baris terakhir yang pendek dan bagian yang bergerigi. Namun, penyesuaian untuk mencegah river masih belum dilakukan. Sulit membayangkan bagaimana mendefinisikan metrik untuk menentukan river. Saya penasaran apakah seseorang sudah menemukan metrik cerdas yang benar-benar berfungsi
• Paragraf yang berusaha menghindari orphan word malah menyisakan kata "large" sendirian. Jika "text-wrap: pretty" diterapkan, masalah itu teratasi
• Tujuan "pretty" yang dirancang oleh CSS Working Group adalah agar setiap browser melakukan apa pun yang bisa dilakukan untuk memperbaiki pembungkusan teks. Tujuannya bukan memaksa semua browser mengambil keputusan yang sama. Karena cara implementasi Chrome, banyak pengembang web mengira nilai ini dimaksudkan untuk mencegah baris terakhir yang pendek. Namun itu bukan niat aslinya
• Saya sudah menggunakan "text-wrap: balance" untuk headline. Sebelumnya saya mencoba menghubungkan kata-kata tertentu untuk menghindari pembungkusan yang buruk. "text-wrap: pretty" akan menyelesaikan masalah serupa pada teks isi