Une introduction interactive aux merveilles du rendu de la typographie arabe et à la dette technique

• La typographie arabe sur le web est un problème d’infrastructure de rendu où s’entremêlent liaison des lettres, texte bidirectionnel, gestion des chiffres et de la ponctuation, et justification des lignes ; difficile de le réduire à un simple bug CSS
• Dans la composition arabe classique, la justification n’était pas obtenue en élargissant les espaces entre les mots, mais via la kashida, c’est-à-dire l’allongement des traits internes des lettres ; les navigateurs modernes, eux, appliquent surtout text-align: justify en augmentant les espaces entre les mots
• En arabe, un même point de code stocké change de forme selon le contexte — isolée, initiale, médiane ou finale — et sans fonctionnalités OpenType ni moteur de shaping, le texte s’affiche sous forme de lettres disjointes
• Les Arabic Presentation Forms de Unicode, les systèmes de numération, l’algorithme bidirectionnel UAX #9 et les caractères de contrôle invisibles provoquent dans les produits réels des problèmes comme des échecs de recherche, des numéros de téléphone inversés ou des déplacements de curseur déroutants
• Des briques essentielles comme HarfBuzz, Amiri ou les W3C Arabic Layout Requirements existent déjà, mais la justification arabe dans les navigateurs et l’usage de jstf restent encore largement non implémentés

---

Point de départ : un problème de composition arabe qui ressemblait à un « bug CSS »

• Dans un dashboard client, des paragraphes arabes mêlant plusieurs types de contenu ne se justifiaient pas comme dans la maquette, avec un bord gauche rendu irrégulier
• La version en alphabet latin du même bloc paraissait « correcte », mais en arabe les lignes commencent à droite, donc l’irrégularité apparaît sur le bord gauche
• Même avec text-align: justify, on n’obtenait pas la forme validée par l’équipe design, où l’on remplit la ligne en allongeant les traits internes des mots
• Le même produit avait déjà connu d’autres problèmes avec l’arabe : noms séparés dans des PDF, échecs d’indexation pour la recherche, anciens points de code Unicode, etc.
• Le fond du problème n’était pas un défaut d’une feuille de style donnée, mais l’état de la typographie arabe sur le web

Le problème que la tradition manuscrite savait résoudre

• Dans la tradition manuscrite arabe classique, la justification se faisait sans élargir les espaces entre les mots, mais en allongeant les traits de liaison à l’intérieur des lettres
• Cette méthode est appelée taṭwīl ou, dans la terminologie technique moderne, kashida ; elle consiste à étirer le trait reliant certaines paires de lettres
• Une page bien composée en Naskh du XVIIe siècle présente des marges alignées des deux côtés et une texture dense et régulière sans espacement exagéré entre les mots
• Le al-khaṭṭ al-mansūb formalisé par Ibn Muqla systématise les formes des lettres à partir du point losangé de la plume de roseau, de la hauteur de l’alif, des proportions d’arcs, etc.
• Dans cette tradition, la justification n’était pas un problème de répartition des espaces, mais un problème de shaping, c’est-à-dire de choix de formes de lettres et de glyphes alternatifs

Une lettre, quatre formes

• L’arabe est une écriture toujours cursive ; il n’existe pas de distinction entre lettres d’imprimerie et écriture manuscrite au sens des caractères détachés
• Chaque lettre change selon ses voisines et peut prendre une forme isolée, initiale, médiane ou finale, et six lettres ne se lient pas vers l’avant, ce qui interrompt la continuité à l’intérieur d’un mot
• Unicode stocke des lettres abstraites, les polices fournissent des glyphes selon la position, et le moteur de shaping applique des fonctionnalités OpenType comme isol, init, medi, fina, rlig, mark, mkmk
• Un mot comme محمد est stocké sous forme de quatre points de code, mais au rendu il devient un seul tracé continu après sélection de plusieurs glyphes et recherches OpenType
• Sans moteur de shaping comme HarfBuzz, ou si un générateur de PDF ne passe pas par cette étape, les mêmes points de code sont rendus comme des lettres isolées les unes des autres

Les fossiles de Unicode : Arabic Presentation Forms

• À l’époque de DOS et des premières versions de Windows, les codepages 8 bits encodaient non pas des lettres abstraites mais les formes elles-mêmes, comme les variantes initiales ou médianes
• Unicode les a conservées pour compatibilité aller-retour, et elles subsistent dans les blocs Arabic Presentation Forms de U+FB50 à U+FEFF
• Ces points de code ne devraient pas apparaître dans les nouveaux documents, mais des extracteurs de texte PDF peuvent encore les produire aujourd’hui
• Si un même nom est stocké une fois en Unicode moderne et une autre en Presentation Forms, il aura le même aspect à l’écran, mais les comparaisons de chaînes et la recherche les traiteront différemment
• Une normalisation NFKC permet de ramener les Presentation Forms vers les lettres abstraites et de réduire les ratés de recherche

Les logiciels qui sautent le shaping et le bidirectionnel

• Les logiciels qui contournent le moteur de shaping et l’algorithme bidirectionnel dessinent les lettres une par une sous forme isolée et placent les lignes de gauche à droite
• Ce type de sortie est réellement rencontré par les lecteurs arabophones sur des enseignes, des cartes d’embarquement, des filigranes ou d’anciens sous-titrages liés au cinéma
• De vieilles versions de Photoshop, matplotlib avec sa configuration par défaut, plusieurs générateurs PDF npm ou des imprimantes de tickets peuvent produire ce problème
• Des contournements courants en Python comme arabic_reshaper et python-bidi utilisent les blocs Presentation Forms pour injecter à l’avance des formes déjà shapées dans la chaîne de caractères
• Cette astuce anticipe dans la chaîne ce que le moteur de rendu devrait faire lui-même, et révèle au fond les défaillances de la stack texte

Trois familles de chiffres et des problèmes de ponctuation

• Les chiffres 0–9 que le monde appelle « Arabic numerals » ne correspondent pas à la forme de chiffres utilisée au quotidien par la plupart des lecteurs arabophones
• L’Égypte, le Soudan, le Levant, l’Irak et les pays du Golfe utilisent les ARABIC-INDIC DIGITS de Unicode : ٠١٢٣٤٥٦٧٨٩
• Le Maghreb utilise des glyphes de chiffres latins, tandis que l’Iran, l’Afghanistan et le Pakistan utilisent les EXTENDED ARABIC-INDIC DIGITS : ۰۱۲۳۴۵۶۷۸۹
• Dans UAX #9, les chiffres ne sont pas des caractères forts mais faibles, et sont donc reclassés comme chiffres européens ou arabes selon la directionnalité du caractère fort précédent
• Un numéro de téléphone comme 010-1234-5678 placé après un mot arabe peut se retrouver affiché dans l’ordre 5678-1234-010, car les tirets sont traités comme neutres
• Les solutions fournies par les plateformes consistent à isoler la directionnalité du numéro en l’entourant de ‎ ou de <bdi>
• Les séparateurs décimal et de milliers courants dans le monde arabe sont U+066B ٫ et U+066C ٬ ; ils ressemblent presque à . et , en ASCII, mais ont des points de code et des propriétés bidirectionnelles différents

Des contournements et simplifications de l’imprimé au web

• Le Kitāb Ṣalāt al-Sawāʿī imprimé à Fano en 1514 est le premier livre en caractères mobiles arabes connu, avec des exemples de liaisons rompues et d’erreurs de placement des points
• Le Qurʾān de Paganini imprimé à Venise en 1537, cumulant fautes de composition et erreurs textuelles, fut un échec commercial ; un exemplaire a été retrouvé en 1987 dans la bibliothèque d’un monastère vénitien
• Le récit d’une interdiction ottomane de l’imprimerie pose problème, car les décrets originaux attribués à Bayezid II et Selim I n’ont pas été conservés et l’on dépend surtout de récits de voyageurs européens
• La Bulaq Press du Caire, fondée en 1820 par Muhammad Ali, a amélioré la qualité des caractères métalliques arabes grâce à des centaines de pièces typographiques et beaucoup de patience
• Le Qurʾān du Caire de 1924 a été composé en caractères métalliques à l’Amiria Press et a contribué à normaliser le texte et la typographie au XXe siècle
• À la fin des années 1950, Kamel Mrowa et Linotype ont créé le Simplified Arabic pour s’adapter au magazine 90 canaux : formes initiales fusionnées avec les médianes, finales avec les isolées, et réduction des ligatures
• Simplified Arabic a rendu possible une production de journaux moins chère et plus rapide, puis a dominé les rédactions arabophones en l’espace d’une génération

La kashida que le web ne sait toujours pas dessiner

• Les premiers brouillons de CSS Text Module Level 3 comportaient une valeur kashida pour text-justify, et Internet Explorer 5.5 l’avait implémentée dès 2000
• IE 5.5 proposait aussi la propriété text-kashida-space, mais faute d’implémentation dans les autres navigateurs, cette valeur a disparu de la spécification
• Dans Chrome, Firefox et Safari modernes, text-align: justify fonctionne en arabe en augmentant les espaces entre les mots
• Les issues du CSS Working Group sur la justification arabe sont ouvertes depuis au moins 2015, et le travail du W3C sur Arabic Layout Requirements a commencé la même année
• La justification par kashida exige une négociation répétée entre shaping et layout au niveau de la ligne, car les glyphes étirés changent la largeur, ce qui modifie les retours à la ligne et donc la quantité d’étirement nécessaire
• OpenType dispose depuis les années 1990 d’une table jstf permettant aux polices d’indiquer des priorités de justification, mais les moteurs de shaping la lisent rarement et les créateurs de polices la fournissent rarement
• Microsoft Word et InDesign Middle East Edition proposent la justification par kashida, mais l’ensemble des moteurs de rendu de navigateurs les plus utilisés n’allonge toujours pas les lettres

Hacks au Tatweel, ligatures et problèmes de voyelles

• Sur le web, un contournement fréquent consiste à insérer dans le texte le caractère U+0640 TATWEEL pour simuler un trait allongé
• Comme le Tatweel modifie le contenu lui-même, il entraîne des problèmes de recherche, de copier-coller, de lecteur d’écran et de redistribution en colonnes
• Le trait dessiné par Tatweel n’est pas une kashida pilotée par les règles de la police et des caractères, mais une barre de style machine à écrire insérée à l’aveugle par l’auteur
• Les ligatures OpenType se répartissent entre rlig, liga et dlig, et si une ligature obligatoire comme lām-alif casse, le résultat n’est pas seulement laid : il devient incorrect
• Insérer U+200C ZERO WIDTH NON-JOINER entre des lettres conserve les caractères stockés, mais force le rendu à afficher chaque lettre comme isolée
• Safari ignore "rlig" 0 et "liga" 0, si bien que les démos de désactivation de ligatures obligatoires n’y produisent aucun effet
• Amiri est une police Naskh publiée en 2011 par Khaled Hosny sous SIL Open Font License ; après une réécriture 1.0 en 2022, elle offre des kashidas courbes et une gestion raffinée de l’empilement des voyelles
• Un composant de carte combinant line-height: 1 et overflow: hidden peut couper les voyelles supérieures dans l’arabe entièrement vocalisé

L’algorithme bidirectionnel et le curseur qui ment

• Dans un paragraphe arabe, les numéros de version, identifiants anglais, URL ou mots français déclenchent l’algorithme bidirectionnel Unicode UAX #9
• Les lettres arabes sont des caractères forts de droite à gauche, les lettres latines des caractères forts de gauche à droite, les chiffres des caractères faibles dépendant du contexte, et les espaces comme la ponctuation des caractères neutres
• L’algorithme attribue une classe directionnelle à chaque caractère, interprète progressivement les caractères faibles et neutres, assigne des niveaux d’imbrication, puis inverse les runs de même niveau
• Comme l’ordre visuel à l’écran diffère de l’ordre logique en mémoire, les mouvements du curseur, les clics de souris et la sélection doivent sans cesse traduire entre ces deux ordres
• Aux frontières entre runs, il existe deux positions de curseur légitimes — logique et visuelle — et Chrome, Firefox, Qt ou Outlook peuvent les gérer différemment
• Rédiger du texte mixte arabe-anglais reste en 2026 une expérience à forte charge cognitive dans les principaux éditeurs, clients mail et applications de chat
• Une plage comme الصفحات 10-20 peut sembler signifier « de 20 à 10 » à cause de la règle W2 et du traitement neutre du tiret ; on peut corriger cela en insérant U+200E LEFT-TO-RIGHT MARK avant

Les bases qui fonctionnent et les manques persistants

• Khaled Hosny a créé Amiri, écrit l’outil en ligne de commande HarfBuzz hb-shape et a aussi participé à la maintenance de HarfBuzz
• Behdad Esfahbod a écrit une grande partie de HarfBuzz avant l’arrivée de Hosny et a contribué au moteur de shaping qui permet aujourd’hui aux navigateurs de dessiner correctement les lettres arabes
• Brill a commandé à John Hudson une police Brill intégrant tous les caractères de translittération nécessaires à son catalogue en études sémitiques, puis l’a publiée gratuitement pour un usage non commercial en 2011
• Le Sakhr AX-170 était un ordinateur MSX saoudo-koweïtien affichant l’arabe depuis une ROM vers 1984, avec prise en charge d’identifiants Arabic BASIC écrits de droite à gauche
• HarfBuzz, Amiri, Scheherazade, la prise en charge des Presentation Forms dans GNU Unifont, Noto Arabic et la documentation W3C Arabic Layout reposent en grande partie sur les efforts d’un petit nombre de personnes, d’organisations et de bénévoles
• Les éditeurs de navigateurs ont adopté HarfBuzz une fois l’outil disponible et mûr gratuitement, mais ont très peu contribué à la boucle de layout nécessaire pour reproduire à l’écran la justification héritée de la tradition manuscrite
• L’écart restant correspond à des algorithmes bien compris qu’il faut encore implémenter dans quelques moteurs de layout ; la marge gauche irrégulière d’un dashboard client est simplement la manifestation visible de ce manque d’investissement

[GN⁺]

Commentaires sur Lobste.rs

• C’est vraiment un article formidable
  Et j’aime le fait que ce caractère ﷽ soit un seul point de code. C’est fascinant quand on le copie
  Cela signifie : « Au nom d’Allah, le Tout Miséricordieux, le Très Miséricordieux »

  • À propos de ﷽, cette phrase de l’article est poétique
    « Un monument d’une époque où personne ne faisait confiance aux moteurs de rendu, si bien que le rendu était cuit dans l’encodage. Comme une mouche récitante conservée pour l’éternité dans l’ambre. »
  • Ce caractère Unicode a aussi été abordé ici : https://lobste.rs/s/7s4sjp
    J’ai pris plaisir à suivre les références du lien Wikipédia cité ici : https://lobste.rs/c/dq2ucz
    En résumé, ce caractère est entré dans Unicode parce qu’il figurait dans une page de code pakistanaise, et il y figurait parce qu’il existait une obligation légale d’inclure cette formule dans des documents juridiques. L’ourdou étant une langue indo-européenne, il aurait probablement été difficile, avec la technologie de l’époque, de basculer comme par un « appel externe » vers une page de code arabe pour écrire la Basmala
    Malheureusement, tous les commentaires ne montrent pas les qualités de cette communauté

• Meta : encore un excellent exemple montrant qu’il faut un tag typography pour ce genre d’article

  • Je ne vois pas pourquoi il le faudrait. Le sujet a l’air assez populaire ; y a-t-il vraiment une forte demande pour masquer ce type de contenu ?
    Sur lobste.rs, les tags servent surtout au filtrage

• La propriété text-justify d’IE, quand même ; il y avait beaucoup de choses intéressantes à cette époque. Il y avait aussi text-justify: newspaper, que certains ont décrit des décennies plus tard comme du Knuth-Plass ou quelque chose du genre, mais je n’y ai jamais vraiment cru
  https://mediumwell.com/wp-content/uploads/… montre un comportement présenté à l’époque comme text-justify: newspaper, qui correspond en fait à la spécification actuelle de text-justify: inter-character
  IE avait vraiment beaucoup de fonctionnalités impressionnantes très tôt, et les autres navigateurs les ont laissées dans le panier « trop difficile ». Certaines ne sont jamais revenues, et d’autres ne sont revenues qu’après 15 ou 30 ans. Firefox a obtenu text-justify: inter-character en 2017, Chromium n’a implémenté cette partie qu’il y a quelques mois, et Safari ne l’a toujours pas

• Un article extraordinairement bon et instructif. J’ai particulièrement apprécié le contexte historique, qui apporte une perspective large à l’ensemble du sujet
  En tant que personne ayant à la fois une formation en histoire et une carrière dans l’IT, c’était un texte qui touchait parfaitement mes deux centres d’intérêt

• Il y a quelque chose dans l’article qui déclenche mon détecteur de LLM, ce qui est dommage. D’autant plus qu’il a de la profondeur et traite de parties moins documentées de la pile technologique moderne
  Un exemple de passage qui sonne LLM serait celui-ci, mais on retrouve cette impression dans tout l’article :
  « La raison pour laquelle aucun navigateur ne le propose est structurelle, et cette structure, en tant qu’obstacle, est assez élégante. La justification latine traite le texte mis en forme comme quelque chose de fixe, mesure les mots, verse l’espace restant dans les interstices, et c’est terminé. La mise en forme et la mise en page restent chacune dans leur boîte, et toutes les piles de texte en production sont conçues autour de cette séparation. La justification par kashida ouvre cette boîte de force. »
  J’aimerais demander à @lr0 si le corps de cet article a été généré, retouché ou traduit par un LLM. Si c’est le cas, il pourrait être utile d’ajuster le niveau de contrôle laissé au LLM sur le résultat final. D’anciens billets de blog, par exemple https://lr0.org/blog/p/gpt/ et https://lr0.org/blog/p/linux_new_users/ , donnaient une impression bien plus humaine