Le letter-spacing : l’erreur qui casse les mots arabes

L’écriture arabe est cursive : chaque lettre se lie à sa voisine selon sa position dans le mot. La propriété letter-spacing ajoute un espace après chaque caractère sans connaître ces liaisons ; le résultat est un texte découpé, lettre par lettre, illisible. L’erreur apparaît surtout dans les titres, quand des styles conçus pour le latin sont repris tels quels sur la version arabe.

La correction est simple : réglez letter-spacing sur normal ou 0 pour les textes arabes, et utilisez word-spacing si vous voulez aérer un titre sans casser les liaisons. Réservez l’espacement des lettres au contenu latin de la page. Chez Somu Raqami, supprimer cet espacement des titres arabes est une étape standard de chaque projet.

  • letter-spacing : normal ou 0 sur les éléments arabes.
  • word-spacing pour aérer les titres sans casser les liaisons.
  • Conservez les valeurs positives de letter-spacing pour le latin uniquement.

La direction du texte mixte : pourquoi les numéros et les noms latins s’inversent

Toute phrase arabe qui contient un numéro de téléphone, un nom de marque latin, un lien ou une référence de commande exige une direction explicite. L’algorithme bidirectionnel Unicode classe chaque caractère, et les chiffres se lisent de gauche à droite même dans un contexte arabe. Sans isolation correcte, le numéro ou le nom latin apparaît au mauvais endroit de la phrase.

Le réglage commence à la racine : ajoutez dir=rtl et lang=ar à la balise html de chaque page. Dans le texte, isolez chaque passage latin dans un élément portant dir=ltr ou dans un élément bdi, et utilisez dir=auto pour les champs que le client remplit lui-même. Le W3C recommande les propriétés logiques comme margin-inline-start plutôt que des valeurs droite/gauche figées, et déconseille de ne compter que sur direction en CSS : ces styles peuvent être désactivés ou perdus à la copie.

  • dir=rtl sur la balise html de chaque page arabe, y compris les pages d’erreur.
  • Isoler les passages latins avec span dir=ltr ou bdi.
  • dir=auto dans les champs de saisie qui reçoivent les noms des clients.
  • Propriétés logiques (inline-start/inline-end) au lieu de right/left figés.

Le saut de mise en page au changement de police : métriques et size-adjust en clair

Avec font-display: swap, le navigateur affiche d’abord une police de substitution puis la remplace par la police web. Si les métriques des deux polices diffèrent — largeur et hauteur des lettres — le texte bouge et la page saute, surtout sur mobile où ces décalages se mesurent.

La solution tient en trois réglages simples : size-adjust agit comme une loupe appliquée à la police de substitution pour que ses lettres occupent le même espace que la police web ; ascent-override, descent-override et line-gap-override fixent les hauteurs verticales pour que les lignes restent stables. Chez Somu Raqami, nous déclarons une police de substitution aux métriques ajustées avec un simple pourcentage, et nous mesurons le résultat sur une largeur de mobile réelle, jamais sur un écran de bureau.

  • Déclarez une police de secours locale dans @font-face au lieu de laisser le système choisir.
  • Réglez size-adjust sur un pourcentage qui aligne la police de secours sur la police web.
  • Figez ascent, descent et line-gap avec les remplacements de métriques.
  • Mesurez le décalage sur une largeur de mobile : le bureau masque ces sauts.

L’interligne : l’arabe a besoin de plus d’espace que le latin

L’arabe porte des diacritiques au-dessus et au-dessous des lettres, des lettres descendantes profondes et des ascendantes hautes. Un interligne hérité de maquettes latines — autour de 1,2 ou 1,4 — coupe les signes diacritiques ou colle les lignes entre elles et rend la lecture pénible.

Utilisez une valeur sans unité comme 1,7 sur un texte long : elle se multiplie selon la taille du texte dans chaque contexte, et montez plus haut pour les titres vocalisés. Vérifiez aussi qu’un overflow: hidden ne coupe ni les lettres descendantes ni les diacritiques, et que les cartes de service n’imposent pas une hauteur fixe à un texte arabe vocalisé.

  • Un line-height sans unité sur le texte arabe.
  • Une valeur plus haute pour les titres vocalisés et les grands titres.
  • Évitez les hauteurs fixes en pixels dans les cartes et les boutons.

Icônes reflétées et texte SVG : ce qui se reflète et ce qui ne se reflète pas

Les icônes qui portent un sens directionnel — flèche suivant, retour, partage, annuler — doivent refléter leur direction dans une interface arabe, sinon elles envoient le client du mauvais côté. Les icônes neutres comme l’horloge, la recherche ou l’appareil photo ne se reflètent jamais. Le retournement n’est pas automatique : l’algorithme Unicode reflète la ponctuation, pas les dessins d’icônes.

La solution pratique : appliquez transform: scaleX(-1) aux icônes directionnelles uniquement dans le sélecteur [dir=rtl], ou exportez deux versions du dessin. Dans un SVG, ajoutez direction=rtl à la balise svg, et pour changer la direction à l’intérieur d’un élément tspan ajoutez unicode-bidi avec la valeur embed, comme le documente le W3C dans son tutoriel SVG.

  • Reflétez le directionnel : flèches de navigation, retour, partage, annuler.
  • Ne reflétez pas le neutre : horloge, recherche, appareil photo, localisation.
  • scaleX(-1) sous [dir=rtl] plutôt qu’une modification manuelle des fichiers.
  • direction=rtl dans svg et unicode-bidi: embed dans tspan pour le texte arabe.

La checklist avant la mise en ligne du site arabe

Cette liste résume tout l’article : relisez-la avant de publier une page arabe, et à chaque nouveau lancement. Chaque point se vérifie à l’œil, comme votre client.

  • La balise html porte lang=ar et dir=rtl sur chaque page, y compris les pages d’erreur.
  • Aucun espacement positif entre les lettres sur un texte arabe.
  • Chaque numéro, nom latin ou lien dans une phrase arabe est isolé dans la bonne direction.
  • La police de secours a des métriques ajustées et le saut est mesuré sur une largeur de mobile réelle.
  • L’interligne du texte arabe atteint au moins 1,7 sans unité et ne coupe aucun diacritique.
  • Les icônes directionnelles sont reflétées en RTL et les neutres sont intactes.
  • Les textes SVG portent direction=rtl.
  • Test complet avec la police web bloquée pour voir l’état de secours.