Ajouter une version arabe de ce site signifiait poser dir="rtl" sur la page et refléter la
mise en page. La majeure partie a simplement fonctionné. Les parties qui ont cassé n'étaient pas les
grosses, évidentes, mais de petits morceaux de CSS et de contenu qui avaient tranquillement supposé la
gauche vers la droite depuis le début.
1. Le piège à miel
Le formulaire de contact a un champ caché servant de piège à spam : les robots le remplissent, les vraies
personnes ne le voient jamais. Il était caché avec position: absolute; left: -9999px;. Sur
une page de gauche à droite, ça le range simplement hors de vue, au-delà du bord gauche. En
dir="rtl", le début de la ligne se trouve à droite, et un contenu très éloigné vers la gauche
devient au contraire un débordement défilable. La page d'accueil arabe s'est retrouvée avec une énorme
barre de défilement horizontale, et une capture d'écran sans interface est ressortie comme un champ vide
de couleur de fond. La correction est le modèle standard « visuellement caché », qui ne dépend pas du tout
de la direction :
.form-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}2. L'espacement des lettres
Les titres de la police d'affichage utilisent du tracking, un espacement supplémentaire entre les caractères. L'arabe est une écriture liée : les lettres se rattachent à leurs voisines, et l'espacement des lettres écarte les jonctions jusqu'à ce que le mot cesse de se lire comme un mot. La correction a été de le ramener à zéro pour tout ce qui est en arabe, et de donner au texte du corps plus d'espace vertical à la place :
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) body { line-height: 1.8; }3. Deux expressions anglaises à la suite
Le héros en arabe se terminait par ...علوم حاسوب في SFU. Vancouver, BC.
L'algorithme bidirectionnel du navigateur traite un point et une espace comme neutres, donc
SFU et Vancouver, BC ont fusionné en une seule séquence de gauche à droite. La
phrase s'affichait avec ses morceaux dans le mauvais ordre : elle se lisait comme
SFU. Vancouver, BC flottant au mauvais endroit, avec le point final du mauvais côté. Insérer
un mot arabe entre les deux expressions a séparé les séquences :
علوم حاسوب في SFU. مقيم في Vancouver, BC. Envelopper chaque expression
dans <bdi>, ou ajouter une marque de droite à gauche (U+200F) juste après
SFU., aurait aussi corrigé le problème.
Ce qui n'a demandé aucun effort
La majeure partie de la mise en page utilisait déjà des propriétés CSS logiques :
margin-inline-start, inset-inline-end, text-align: start. Basculer
dir vers rtl a tout reflété gratuitement. Les restes qui utilisaient encore des
propriétés physiques, points de chronologie, puces de liste, une flèche de retour, étaient les seules
parties à nécessiter une passe. La carte du ciel et les diagrammes restent volontairement de gauche à
droite : ce ne sont pas du texte, et les refléter les aurait rendus faux.
La leçon
Les propriétés logiques font de la direction le problème de quelqu'un d'autre. Tout ce qui suppose encore gauche et droite, et non début et fin, est là où se trouvent les bugs.