Justif - Perataan justify Knuth-Plass dan mikrotipografi untuk web

• Justif adalah demo web yang membandingkan langsung rendering bawaan browser dengan perataan justify teks setingkat publikasi
• Pemenggalan kata dan protrusi karakter, ekspansi lebar, penyesuaian spasi antarhuruf, serta penyesuaian spasi baris terakhir dapat diatur secara terpisah
• Lebar minimum baris terakhir dan rentang hanging punctuation dapat disesuaikan, serta hasil penerapan text-wrap: pretty juga dapat dibandingkan
• Selain dokumen sastra dan teknis berbahasa Inggris, teks RTL Ibrani dan Arab serta bahasa Jepang dapat diuji dengan font serif, sans, dan monospace
• Jumlah baris, pemenggalan baris dengan tanda hubung, baris yang meluap, baris terakhir yang pendek, deviasi spasi dan rivers diukur berdampingan dengan rendering browser

---

Perataan justify dan pengaturan detail

• Justif dirancang agar perataan justify Knuth-Plass dan berbagai fitur mikrotipografi dapat diuji di web
  • Pemenggalan kata
  • Protrusi karakter
  • Ekspansi lebar
  • Penyesuaian spasi antarhuruf
  • Penyesuaian spasi baris terakhir
• Hanging punctuation dapat digunakan setelah protrusi karakter diaktifkan, dan dapat diterapkan pada akhir baris serta awal baris pertama atau pada seluruh rentang
• Lebar minimum baris terakhir dapat disetel ke 0.33, dan lebar teks isi ke 13em

Perbandingan dan pengukuran teks・font

• Teks yang akan dibandingkan dapat dipilih dari Alice in Wonderland, Frog Prince, Frankenstein, Ulysses, posting teknis, RFC 2324, dan contoh font
• Teks RTL Ibrani dan Arab serta teks Jepang juga tersedia
• Font yang didukung mencakup Junicode, EB Garamond, Alegreya, IM Fell English, Vollkorn, Amstelvar, Latin Modern, Georgia, Roboto Flex, Courier Prime, IBM Plex Mono, dan font sistem
• Mengklik atau menekan lama hasil akan menampilkan rendering bawaan browser, sehingga dapat dibandingkan dengan rendering Justif
• Alat perbandingan mendukung text-wrap: pretty, efek blur, penggaris margin, dan penanda spasi yang tidak merata
• Metrik pengukuran mencakup jumlah baris, pemenggalan baris dengan tanda hubung, baris yang meluap, baris terakhir yang pendek, rivers, serta spasi rata-rata, deviasi rata-rata dibanding spasi alami, simpangan baku, dan spasi terlebar

[GN⁺]

Pendapat di Lobste.rs

• Proyek ini dibuat dengan vibe coding memakai Fable https://news.ycombinator.com/item?id=48946738#49002419

  • Topik tulisannya bukan tentang vibe coding, jadi saya ragu apakah tag itu benar-benar perlu
    Saya ingin bisa menyaring pengalaman memakai LLM karena tidak tertarik membacanya, tetapi kenyataannya tampaknya tag itu ditempelkan tanpa kaitan dengan isi utama hanya karena ada dugaan penggunaan asisten coding
    Kali ini penggunaannya memang jelas, tetapi saya juga pernah melihat tag itu dipasang pada tulisan proyek hanya karena mereka menerima kontributor yang memakai asisten coding
  • Ia dengan terus terang mengakui telah memakai LLM saat membuat proyek ini
    Namun, istilah vibe coding dan tag yang dipakai di sini sudah kehilangan kegunaannya, dan kita butuh istilah yang lebih tepat dan produktif untuk membedakan tulisan yang membahas penggunaan LLM dari hasil karya yang kebetulan melibatkan LLM dalam proses pembuatannya
  • Lobster 1: “Mereka katanya berhasil membuat obat untuk menyembuhkan kanker!”
    Lobster 2: “Ya... tapi mereka pakai AlphaFold dan CRISPR, dan... jeng jeng jeng... Fable”
    Lobster 1: “Astaga, tak bisa diterima! Demi umat manusia, mari buang semuanya dan habiskan 40 tahun untuk menggambar protein di papan tulis dengan pensil warna!”

• Hasilnya sangat keren, bahkan lebih baik daripada TeX tanpa paket microtype
  Fitur tata letak huruf seperti ini seharusnya ditangani langsung oleh browser
  Beberapa browser sudah mengimplementasikan text-wrap: pretty, tetapi tampaknya dibatasi hanya untuk beberapa baris

  • Safari belakangan ini punya implementasi pretty yang bagus, tetapi ada bug saat dipakai bersama justify
    https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html
  • Jika melihat spesifikasi text-wrap: pretty, itu hanyalah petunjuk murni dengan perilaku yang tidak didefinisikan
    Kurang lebih hanya berarti user agent harus memprioritaskan tata letak yang lebih baik daripada kecepatan dan mempertimbangkan beberapa baris saat menentukan pemenggalan baris; selain itu, perilakunya sama seperti auto
    Ini bisa menghindari baris terakhir yang terlalu pendek, ruang kosong yang tampak seperti sungai di antara baris teks, atau tanda hubung beruntun, tetapi cara peningkatan pastinya berbeda-beda di tiap browser
    Saya ingat ini masuk ke spesifikasi agar tidak terlalu membatasi ketika beberapa browser menyatakan akan mengimplementasikannya dengan cara yang berbeda-beda
    Mirip dengan kasus Web SQL dihentikan karena fakta bahwa implementasinya pada akhirnya akan memakai SQLite menjadi terlalu terlihat
    Semoga suatu hari fitur-fitur ini diterapkan secara default ke text-wrap: auto sehingga text-wrap: pretty tidak lagi memberi efek apa pun, dan saya juga berharap https://bugzilla.mozilla.org/show_bug.cgi?id=630181 ikut diimplementasikan
    Petunjuk semacam ini bukan hal baru; will-change juga dulu merupakan petunjuk optimasi untuk browser generasi sebelumnya
    Saat mulai dispesifikasikan, di Firefox itu sebagian besar sudah tidak diperlukan dan di beberapa mesin generasi berikutnya bahkan tidak membantu sama sekali, tetapi tetap disalahgunakan secara berlebihan, jadi mungkin lebih baik mempertahankan transformZ(0) yang setidaknya jelas merupakan trik
  • Di dunia yang ideal, library ini tidak perlu ada
    Di demo, Anda bisa mengaktifkan dan menonaktifkan text-wrap: pretty untuk menguji perilaku tiap browser, dan karena cara Blink·WebKit·Gecko menanganinya sangat berbeda, saya sarankan mencobanya di beberapa browser

• Sejak lama saya merasa tanda baca gantung umumnya diterapkan terlalu berlebihan
  Kalau sampai mencolok, itu berarti sudah berlebihan, dan khususnya “ hampir selalu terlalu menonjol, jadi seharusnya didorong keluar bahkan kurang dari setengah pengaturan sekarang
  Sebaliknya, saya justru suka bagaimana “ di awal paragraf berfungsi seperti indentasi kecil
  Hasil saat tanda baca gantung dimatikan dan hanya tonjolan yang lebih halus dibiarkan aktif masih bisa diterima, tetapi kebanyakan saya lebih suka mematikan keduanya
  Hal seperti ini sangat bergantung pada font
  Pada font serif Equity yang saya pakai, jika ini diterapkan pada “f,” di akhir baris, kern membuat koma sudah masuk ke bawah f sehingga bagian atas f malah menonjol ke luar baris, dan itu terlihat janggal
  Jika font serif membuat ekor atau tonjolan huruf melampaui lebar huruf sehingga secara alami menjorok keluar, itu tampaknya lebih layak menjadi sasaran daripada kebanyakan tanda baca
  Untuk penyesuaian jarak huruf, letter-spacing berbahaya karena tidak cocok dengan ligatur
  Jika ligatur diterapkan lebih dulu, hasilnya menjadi “T h i s i s fi n e!”, dan jika letter-spacing yang bukan nol mematikan ligatur, f akan bertabrakan dengan titik pada i
  Biasanya yang muncul adalah kasus kedua, tetapi ini bisa berbeda tergantung sistem tulisan, font, dan fitur OpenType yang diaktifkan secara eksplisit, serta mudah terjadi tanpa sengaja

  • Secara pribadi saya suka tampilan tanda baca gantung, tetapi tentu itu bisa diubah lewat pengaturan
    Saya setuju penyesuaian jarak huruf jadi rumit karena ligatur, tetapi dengan batas default ±3% menurut saya tampilannya masih bagus
    Anda bisa melihat bagian di akhir paragraf pertama contoh “Type Specimen” yang memiliki ligatur fl, fi, dan ffi berurutan, dan batas 3% itu juga bisa diatur
  • Mungkin ini menjelaskan fenomena di beberapa situs Swedia yang membuat saya kesal, ketika tanda kutip ganda kanan pembuka tertinggal sendirian di akhir baris sebelumnya, yaitu karena tanda baca gantung
    Dalam bahasa Swedia, baik awal maupun akhir kutipan sama-sama memakai tanda kutip ganda kanan
    Sudah lama saya penasaran apakah ada cara memberi tahu browser bahasa atau locale dari teks tertentu agar tanda kutip, titik desimal, dan sebagainya bisa ditangani otomatis

• Saya ingin menegaskan bahwa contohnya memakai lebar baris yang sengaja dipersempit untuk menonjolkan efek perbaikannya
  Secara umum, biasanya direkomendasikan satu baris selebar kira-kira dua set alfabet huruf kecil, yakni sekitar 60 karakter

  • Lebar kolom koran lama mungkin juga mirip dengan contoh ini, meski itu bukan berarti harus menjadi patokan saat ini
  • Lebar kolom bisa diperbesar agar bisa dibandingkan pada lebar isi yang realistis
    Perbedaannya jauh kurang dramatis, tetapi tetap jelas, dan bahkan pada lebar baris 36em statistiknya masih jauh lebih baik daripada nilai default

• Saya bertanya-tanya apakah tag vibe coding ditempelkan hanya karena penulis mengungkapkan bahwa ia memakai LLM di situs lain
  Isi tautannya tidak berkaitan dengan LLM maupun vibe coding, jadi sekarang tag ini terasa seperti perburuan penyihir

  • Jika dilihat dengan lebih ramah, itu karena tag ini punya dua fungsi, dan selain menandai bahwa tulisan membahas vibe coding, tag itu juga sering dipakai sebagai peringatan unsur pemicu
    Ini bentrok dengan kegunaan lain yang lebih jelas sehingga membingungkan dan bisa terlihat terlalu agresif
    Satu tag untuk dua tujuan bukanlah hal yang ideal, tetapi secara umum saya mendukung peringatan unsur pemicu dan kemampuan untuk bebas menyaring hal-hal yang tidak ingin dilihat
    Walau tag ini membingungkan, setidaknya itu tidak merugikan penulis