Aller au contenu
Tous les articles
Ingénierie9 min de lecture

Votre site arabe est cassé, et `dir="rtl"` ne l'a pas réparé

Inverser l'attribut de direction représente environ 20 % du travail. Les 80 % restants sont là où la plupart des sites multilingues s'effondrent discrètement.

Ajouter `dir="rtl"` à l'élément html met en miroir votre texte et la disposition des blocs. Cela ne met pas en miroir vos hypothèses. Presque tous les bugs RTL qui atteignent la production viennent d'une direction codée en dur là où un développeur avait oublié que la direction existait.

Cessez d'écrire gauche et droite

Chaque `margin-left`, `padding-right`, `left-0` et `text-left` de votre code est un bug en devenir. CSS dispose des propriétés logiques depuis des années : utilisez `margin-inline-start`, `padding-inline-end`, `inset-inline-start`. Dans Tailwind, ce sont `ms-*`, `me-*`, `ps-*`, `pe-*`, `start-*`, `end-*` et `text-start`. Elles se résolvent correctement dans les deux directions sans la moindre condition.

Les icônes qui doivent s'inverser, et celles qui ne doivent pas

Les icônes directionnelles — flèches de retour, chevrons suivants, indicateurs de progression, boutons d'envoi — portent un sens lié au sens de lecture : elles doivent être inversées. Les icônes représentant des objets, non. Une horloge inversée est fausse. Un logo inversé est pire. Une loupe inversée est simplement étrange, mais les gens le remarquent.

Nombres, dates et contenu mixte

Les nombres restent de gauche à droite à l'intérieur d'un texte de droite à gauche. Idem pour les noms de marque latins, les URL et le code. L'algorithme bidirectionnel du navigateur gère l'essentiel, mais il devine aux frontières : un prix collé à un symbole monétaire, ou un numéro de téléphone dans une phrase, se retrouvera parfois dans le mauvais ordre. Encadrez les séquences ambiguës pour que l'algorithme cesse de deviner.

La typographie n'est pas un simple changement de police

  • L'écriture arabe demande plus d'espace vertical — une interligne généreuse en latin paraît serrée en arabe
  • L'arabe n'a pas de majuscules : les styles en capitales et les jeux d'interlettrage n'apportent rien, sinon une perte de lisibilité
  • Beaucoup de polices display latines ne couvrent pas l'arabe ; choisir une police compagne est une décision de design, pas un repli
  • Le texte se dilate ou se contracte à la traduction — un bouton dimensionné pour l'anglais débordera

Testez-le de la seule façon qui fonctionne

Ouvrez chaque page en arabe et utilisez-la comme une tâche réelle, pas comme une capture d'écran. Soumettez les formulaires. Ouvrez les menus. Parcourez les résultats. Les bugs RTL se cachent dans l'interaction : un panneau qui glisse depuis le mauvais bord, un carrousel qui avance à l'envers, un ordre de focus qui saute d'un bout à l'autre. Rien de tout cela n'apparaît dans une revue statique.

Si personne dans l'équipe ne lit l'arabe, vous n'avez pas construit un site arabe. Vous avez construit un site anglais inversé.


Vous voulez appliquer cela à votre projet ?

Obtenez une fourchette de prix pour ce que vous prévoyez, ou envoyez un brief et recevez une réponse écrite sous 24 heures.

Recevoir le prochain

Uniquement le journal. Jamais votre adresse à quiconque.