Pengantar interaktif tentang pengalaman menakjubkan rendering tipografi Arab dan utang teknisnya

• Tipografi web Arab adalah masalah infrastruktur rendering yang melibatkan sambungan huruf, teks dua arah, penanganan angka dan tanda baca, serta perataan baris secara bersamaan, sehingga sulit diperlakukan sebagai bug CSS sederhana
• Tata huruf Arab klasik menerapkan perataan kanan-kiri bukan dengan memperlebar spasi antarkata, melainkan dengan kashida yang memanjangkan goresan di dalam huruf, tetapi text-align: justify pada browser modern terutama memperlebar spasi antarkata
• Dalam huruf Arab, satu code point yang tersimpan berubah menjadi bentuk terisolasi, awal, tengah, atau akhir tergantung konteks, dan tanpa fitur OpenType serta shaping engine, huruf akan dirender sebagai bentuk yang terpisah-pisah
• Arabic Presentation Forms di Unicode, sistem angka, algoritme dua arah UAX #9, dan karakter kontrol tak terlihat dapat memicu masalah produk nyata seperti pencarian gagal, nomor telepon terbalik, dan kebingungan perpindahan kursor
• Fondasi penting seperti HarfBuzz, Amiri, dan W3C Arabic Layout Requirements sudah dibangun, tetapi perataan Arab di browser dan pemanfaatan jstf masih menjadi celah implementasi

---

Titik awal: masalah tata huruf Arab yang tampak seperti “bug CSS”

• Paragraf Arab dengan konten campuran di dasbor pelanggan tidak dirender rata kanan-kiri seperti pada mockup desain, dan tepi kirinya terlihat bergerigi
• Versi huruf Latin pada blok yang sama tampak “fine”, tetapi dalam bahasa Arab baris dimulai dari kanan sehingga tepi yang tidak rata muncul di sebelah kiri
• Meskipun text-align: justify diterapkan, hasilnya tetap tidak bisa mengisi baris dengan memanjangkan goresan di dalam kata seperti bentuk yang disetujui tim desain
• Pada produk yang sama, sebelumnya juga berulang masalah pemrosesan Arab seperti huruf nama yang terpisah di PDF, kegagalan indeks pencarian, dan masalah code point Unicode lama
• Hakikat persoalannya bukan cacat pada stylesheet tertentu, melainkan kondisi tipografi Arab di web

Masalah yang dulu diselesaikan tradisi penyalinan naskah

• Tradisi penyalinan naskah Arab klasik meratakan baris kanan-kiri bukan dengan menambah spasi antarkata, tetapi dengan memanjangkan goresan sambungan di dalam bentuk huruf
• Cara ini disebut taṭwīl atau dalam istilah teknis modern kashida, yaitu memanjangkan goresan sambungan di antara pasangan huruf tertentu
• Halaman Naskh abad ke-17 yang tersusun baik memperlihatkan margin kiri-kanan yang sejajar dan jarak antarkata yang tidak melebar, menciptakan tekstur yang padat dan teratur
• al-khaṭṭ al-mansūb yang dirumuskan Ibn Muqla menata bentuk huruf secara sistematis melalui titik belah ketupat dari ujung pena buluh, tinggi alif, rasio lengkung, dan sebagainya
• Dalam tradisi ini, perataan baris bukan masalah distribusi spasi, melainkan masalah shaping dalam memilih bentuk huruf dan glif alternatif

Satu huruf, empat bentuk

• Bahasa Arab adalah tulisan yang selalu tersambung seperti tulisan tangan, tanpa pemisahan huruf balok antara bentuk cetak dan tulisan tangan
• Setiap huruf berubah menurut tetangganya menjadi bentuk terisolasi, awal, tengah, atau akhir, dan enam huruf tidak tersambung ke depan sehingga memutus aliran di dalam kata
• Unicode menyimpan huruf abstrak, font menyediakan glif berdasarkan posisi, dan shaping engine menerapkan fitur OpenType seperti isol, init, medi, fina, rlig, mark, mkmk
• Kata seperti محمد tersimpan sebagai empat code point, tetapi saat dirender tampak sebagai satu goresan tersambung setelah melalui pemilihan beberapa glif dan lookup OpenType
• Jika shaping engine seperti HarfBuzz tidak ada atau generator PDF melewatkan tahap ini, code point yang sama akan dirender sebagai huruf-huruf terisolasi yang saling terpisah

Fosil Unicode: Arabic Presentation Forms

• Code page 8-bit pada era DOS dan Windows awal tidak mengodekan huruf abstrak, melainkan bentuk itu sendiri seperti bentuk awal dan tengah sebagai karakter terpisah
• Unicode menerimanya demi kompatibilitas bolak-balik, dan peninggalan itu masih ada dalam blok Arabic Presentation Forms dari U+FB50 sampai U+FEFF
• Code point ini tidak boleh masuk ke dokumen baru, tetapi pengekstrak teks PDF masih bisa mengeluarkannya hingga sekarang
• Jika nama yang sama disimpan sekali dalam Unicode modern dan sekali lagi dalam Presentation Forms, tampilannya di layar bisa sama tetapi perbandingan string dan pencarian akan memperlakukannya berbeda
• Normalisasi NFKC dapat melipat Presentation Forms menjadi huruf abstrak sehingga mengurangi kasus pencarian yang terlewat

Perangkat lunak yang melewati shaping dan pemrosesan dua arah

• Perangkat lunak yang melewati shaping engine dan algoritme dua arah akan menggambar huruf satu per satu sebagai bentuk terisolasi lalu menata baris dari kiri ke kanan
• Keluaran seperti ini benar-benar ditemui pembaca Arab pada papan toko, boarding pass, watermark, dan penulisan Arab terkait film lama
• Photoshop lama, matplotlib dengan setelan bawaan, berbagai generator PDF di npm, dan printer struk dapat menimbulkan masalah ini
• Solusi pintas Python yang umum, arabic_reshaper dan python-bidi, memanggang bentuk yang sudah dibentuk sebelumnya ke dalam string dengan memakai blok Presentation Forms
• Solusi pintas ini memindahkan pekerjaan yang seharusnya dilakukan renderer ke dalam string, dan pada dasarnya memperlihatkan cacat pada text stack

Tiga jenis angka dan masalah tanda baca

• Angka 0–9 yang di dunia disebut “Arabic numerals” bukanlah bentuk angka yang paling umum dipakai banyak pembaca Arab sehari-hari
• Mesir, Sudan, Levant, Irak, dan kawasan Teluk memakai ARABIC-INDIC DIGITS ٠١٢٣٤٥٦٧٨٩ dalam Unicode
• Kawasan Maghreb memakai glif angka Latin, sedangkan Iran, Afghanistan, dan Pakistan memakai EXTENDED ARABIC-INDIC DIGITS ۰۱۲۳۴۵۶۷۸۹
• Dalam UAX #9, angka diperlakukan bukan sebagai karakter kuat melainkan karakter lemah, dan diklasifikasikan ulang sebagai angka Eropa atau Arab menurut arah karakter kuat sebelumnya
• Nomor telepon seperti 010-1234-5678 setelah kata Arab bisa berubah urutan di layar menjadi seperti 5678-1234-010 karena tanda hubung diperlakukan sebagai netral
• Solusi yang disediakan platform adalah membungkus nomor dengan ‎ atau <bdi> untuk mengisolasi arah penulisannya
• Pemisah desimal dan ribuan di dunia Arab adalah U+066B ٫ dan U+066C ٬, sementara ASCII . dan , tampak hampir sama tetapi memiliki code point dan properti dua arah yang berbeda

Jalan pintas dan penyederhanaan dari cetak ke web

• Kitāb Ṣalāt al-Sawāʿī yang dicetak di Fano pada 1514 adalah buku Arab huruf lepas pertama, dan menunjukkan contoh sambungan huruf yang terputus serta kesalahan posisi titik
• Qurʾān Paganini dari Venesia tahun 1537 gagal secara komersial karena kesalahan tata huruf dan kesalahan teks, dan satu eksemplarnya ditemukan pada 1987 di perpustakaan biara di Venesia
• Kisah larangan percetakan Ottoman bermasalah karena teks asli dekret Bayezid II dan Selim I tidak tersisa, sehingga bergantung pada catatan pengelana Eropa
• Bulaq Press di Kairo didirikan Muhammad Ali pada 1820 dan meningkatkan mutu huruf logam Arab melalui ratusan potongan huruf dan banyak kesabaran
• Qurʾān Kairo 1924 diproduksi dengan huruf logam di Amiria Press dan berkontribusi pada standardisasi teks dan tipografi abad ke-20
• Pada akhir 1950-an, Kamel Mrowa dan Linotype membuat Simplified Arabic dengan menggabungkan bentuk awal ke bentuk tengah, bentuk akhir ke bentuk terisolasi, serta mengurangi ligatur agar cocok untuk majalah 90 kanal
• Simplified Arabic memungkinkan produksi surat kabar yang murah dan cepat, lalu menguasai newsroom Arab dalam satu generasi

Kashida yang masih belum bisa digambar web

• Draf awal CSS Text Module Level 3 pernah memiliki nilai text-justify berupa kashida, dan Internet Explorer 5.5 telah mengimplementasikannya pada 2000
• IE 5.5 juga menyediakan properti text-kashida-space, tetapi nilai itu dihapus dari spesifikasi karena browser lain tidak mengimplementasikannya
• text-align: justify pada Chrome, Firefox, dan Safari modern bekerja untuk bahasa Arab dengan cara memperlebar spasi antarkata
• Isu perataan Arab di CSS Working Group sudah terbuka setidaknya sejak 2015, dan pekerjaan W3C Arabic Layout Requirements juga dimulai pada tahun yang sama
• Perataan kashida menuntut shaping dan layout bernegosiasi ulang per baris, karena glif yang dipanjangkan mengubah lebar, perubahan lebar itu mengubah pemenggalan baris, lalu mengubah lagi jumlah pemanjangan yang dibutuhkan
• OpenType sudah memiliki tabel jstf sejak 1990-an agar font bisa memberi tahu prioritas justifikasi, tetapi shaping engine hampir tidak membacanya dan pembuat font hampir tidak menyediakannya
• Microsoft Word dan InDesign Middle East Edition menyediakan perataan kashida, tetapi kumpulan renderer browser yang paling banyak dipakai orang untuk membaca masih belum mampu memanjangkan huruf

Hack tatweel serta masalah ligatur dan harakat

• Solusi pintas yang umum di web adalah menyisipkan karakter U+0640 TATWEEL ke dalam teks itu sendiri agar tampak seperti goresan yang dipanjangkan
• Tatweel mengubah konten, sehingga menimbulkan masalah pada pencocokan pencarian, salin-tempel, screen reader, dan reflow kolom
• Goresan yang digambar Tatweel bukan kashida yang ditempatkan menurut aturan font dan karakter, melainkan batang ala mesin tik yang dimasukkan penulis berdasarkan tebakan
• Ligatur OpenType dibagi menjadi rlig, liga, dan dlig, dan jika ligatur wajib seperti lām-alif rusak, hasilnya bukan sekadar jelek tetapi salah
• Menyisipkan U+200C ZERO WIDTH NON-JOINER di antara huruf menjaga huruf yang tersimpan tetap sama, tetapi memaksa rendering setiap huruf menjadi bentuk terisolasi
• Safari mengabaikan "rlig" 0, "liga" 0, sehingga demo penonaktifan ligatur wajib tidak berpengaruh
• Amiri adalah font Naskh yang dirilis Khaled Hosny pada 2011 di bawah SIL Open Font License, dan setelah penulisan ulang 1.0 pada 2022 menawarkan kashida melengkung dan penumpukan harakat yang canggih
• Komponen kartu dengan line-height: 1 dan overflow: hidden dapat memotong harakat atas dalam teks Arab yang diberi vokal lengkap

Algoritme dua arah dan kursor yang berbohong

• Nomor versi, identifier bahasa Inggris, URL, dan kata-kata Prancis di dalam paragraf Arab memanggil UAX #9, Unicode Bidirectional Algorithm
• Huruf Arab diperlakukan sebagai karakter kuat kanan-ke-kiri, huruf Latin sebagai karakter kuat kiri-ke-kanan, angka sebagai karakter lemah yang mengikuti konteks, dan spasi serta tanda baca sebagai karakter netral
• Algoritme ini menetapkan kelas arah per karakter, lalu menafsirkan karakter lemah dan netral secara bertahap, setelah itu menetapkan embedding level dan membalik run pada level yang sama
• Karena urutan visual di layar berbeda dari urutan logis di memori, perpindahan kursor, klik mouse, dan tindakan seleksi harus terus menerjemahkan antara dua urutan tersebut
• Pada batas run ada dua posisi kursor yang sama-sama sah, yaitu posisi logis dan posisi visual, dan Chrome, Firefox, Qt, serta Outlook bisa menanganinya secara berbeda
• Menulis teks Arab-Inggris campuran masih menjadi pengalaman dengan biaya kognitif tinggi secara bawaan di editor utama, klien email, dan aplikasi chat bahkan pada 2026
• Rentang seperti الصفحات 10-20 bisa tampak seperti “dari 20 ke 10” karena aturan W2 dan perlakuan tanda hubung netral, dan dapat diperbaiki dengan menambahkan U+200E LEFT-TO-RIGHT MARK di depannya

Fondasi yang sudah berfungsi dan celah yang tersisa

• Khaled Hosny membuat Amiri, menulis alat command line HarfBuzz hb-shape, dan juga berperan sebagai salah satu pemelihara HarfBuzz
• Behdad Esfahbod menulis banyak bagian HarfBuzz sebelum Hosny dan berkontribusi pada shaping engine yang membuat huruf Arab digambar dengan benar di browser saat ini
• Brill memesan typeface Brill kepada John Hudson untuk mencakup seluruh karakter transliterasi yang dibutuhkan katalog Semitics, lalu merilisnya gratis untuk penggunaan nonkomersial pada 2011
• Sakhr AX-170 adalah komputer MSX Saudi-Kuwait sekitar 1984 yang menampilkan bahasa Arab dari ROM dan mendukung identifier Arabic BASIC yang ditulis dari kanan ke kiri
• HarfBuzz, Amiri, Scheherazade, dukungan Presentation Forms di GNU Unifont, Noto Arabic, dan dokumen W3C Arabic Layout sangat bergantung pada upaya segelintir individu, organisasi, dan relawan
• Vendor browser menerima HarfBuzz setelah menjadi matang dan tersedia gratis, tetapi hampir tidak berkontribusi pada loop layout yang dibutuhkan untuk menerapkan metode perataan tradisi naskah di layar
• Kesenjangan yang tersisa adalah algoritme yang sudah dipahami dengan baik dan perlu diimplementasikan di beberapa layout engine, dan margin kiri yang bergerigi pada dasbor pelanggan adalah bentuk nyata yang dilihat pengguna dari tidak adanya investasi ini

[GN⁺]

Komentar Lobste.rs

• Tulisan yang benar-benar luar biasa
  Dan saya suka fakta bahwa karakter ﷽ ini adalah satu code point. Coba salin, rasanya ajaib
  Artinya kira-kira “Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang”

  • Kalimat di artikel tentang ﷽ ini terasa puitis
    “Sebuah monumen dari masa ketika tak seorang pun mempercayai mesin perender, sehingga rendering dipanggang langsung ke dalam encoding. Seperti lalat yang melantunkan doa, diawetkan selamanya di dalam ambar”
  • Karakter Unicode itu juga pernah dibahas di sini: https://lobste.rs/s/7s4sjp
    Menelusuri referensi dari tautan Wikipedia yang dirujuk di sana cukup menyenangkan: https://lobste.rs/c/dq2ucz
    Singkatnya, karakter ini masuk ke Unicode karena sudah ada di code page Pakistan, dan masuk ke sana karena ada tuntutan hukum agar frasa tersebut disertakan dalam dokumen legal. Urdu adalah bahasa rumpun Indo-Eropa, jadi dengan teknologi saat itu mungkin sulit untuk “beralih keluar” ke code page Arab demi menulis Basmallah
    Sayangnya, tidak semua komentar menampilkan sisi terbaik komunitas itu

• Meta: ini contoh bagus lainnya bahwa artikel seperti ini butuh tag typography

  • Saya tidak paham kenapa itu diperlukan. Topiknya tampak cukup populer; apakah memang ada permintaan kuat untuk menyembunyikan konten seperti ini?
    Di lobste.rs, tag terutama dipakai untuk pemfilteran

• Properti text-justify di IE, ya. Dulu ada banyak hal menarik. Bahkan ada text-justify: newspaper, dan meski beberapa dekade kemudian ada yang menjelaskannya sebagai Knuth-Plass atau semacamnya, saya tidak percaya itu benar-benar begitu
  https://mediumwell.com/wp-content/uploads/… menunjukkan perilaku yang saat itu diklaim sebagai text-justify: newspaper, dan ternyata cocok dengan text-justify: inter-character dalam spesifikasi modern
  IE sebenarnya punya cukup banyak fitur keren sejak sangat awal, dan browser lain menaruh fitur-fitur semacam itu ke keranjang “terlalu sulit”. Pada akhirnya ada yang tidak pernah kembali, atau baru kembali setelah 15 atau 30 tahun. Firefox mendapatkan text-justify: inter-character pada 2017, Chromium baru mengimplementasikan bagian itu beberapa bulan lalu, dan Safari masih belum punya

• Artikel yang luar biasa bagus dan informatif. Saya terutama menyukai latar sejarahnya yang memberi konteks luas bagi keseluruhan cerita
  Sebagai orang yang punya gelar terkait sejarah sekaligus karier di IT, ini benar-benar menyentuh dua minat saya sekaligus

• Ada sesuatu di artikel ini yang memicu detektor LLM saya, yang agak disayangkan. Padahal artikelnya punya kedalaman dan membahas bagian dari tumpukan teknologi modern yang kurang terdokumentasi
  Contoh bagian yang terasa seperti tulisan LLM adalah ini, dan nuansa itu terasa di seluruh artikel:
  “Alasan tak ada browser yang menyediakannya bersifat struktural, dan sebagai hambatan, struktur itu cukup elegan. Perataan Latin memperlakukan teks yang sudah dibentuk sebagai sesuatu yang tetap, mengukur kata-kata, menuangkan sisa ruang ke dalam jarak, lalu selesai. Shaping dan layout tetap berada di kotaknya masing-masing, dan semua stack teks yang berjalan dirancang berdasarkan pemisahan itu. Perataan Kashida membuka paksa kotak itu.”
  Saya ingin bertanya kepada @lr0 apakah isi utama artikel ini dihasilkan, dipoles, atau diterjemahkan dengan LLM. Jika iya, mungkin ada baiknya menyesuaikan tingkat kendali LLM atas keluaran akhirnya. Tulisan blog lama, misalnya https://lr0.org/blog/p/gpt/ dan https://lr0.org/blog/p/linux_new_users/ , terasa jauh lebih manusiawi