Rendering Arabic typography and its technical debt, an interactive introduction
8 hours ago
- #Technical Debt
- #Web Development
- #Arabic Typography
- The article recounts the author's experience with a frontend ticket about Arabic text justification in a web dashboard, revealing broader technical issues in Arabic typography on the web.
- Historically, Arabic calligraphy justified text using kashida (taʿwīl), elongating connecting strokes between letters rather than stretching spaces, as established by Ibn Muqla in the 10th century and refined over centuries.
- Arabic typography is complex due to its cursive nature, with letters having four positional forms (isolated, initial, medial, final) and script variations across languages like Persian and Urdu, requiring shaping engines for correct rendering.
- Web browsers struggle with Arabic justification, lacking support for kashida in CSS (text-justify: kashida), leading to hacks like manually inserting U+0640 TATWEEL characters, which disrupt search and copy-paste functionality.
- The article highlights the bidirectional (bidi) algorithm challenges, such as cursor placement issues and digit reordering (e.g., '10-20' rendering as '20-10'), which affect mixed-language text input and display.
- Notable contributors to Arabic digital typography include Khaled Hosny (creator of Amiri font), Behdad Esfahbod (HarfBuzz shaping engine), and volunteers, with most work done unpaid, highlighting a lack of commercial investment.
- A historical timeline traces Arabic printing from early problematic movable type in 1514 to modern digital efforts, showing persistent technical debt and workarounds like Simplified Arabic to fit mechanical constraints.
- Further resources are listed for software (Amiri, HarfBuzz), specifications (UAX #9, W3C Arabic Layout Requirements), and historical texts to explore Arabic typography and its challenges in-depth.