Des interfaces de droite à gauche vraiment natives

Il suffit d’une seconde à un lecteur arabophone pour sentir qu’une interface a été traduite au lieu d’être pensée pour lui. Le texte va bien de droite à gauche, mais les flèches pointent du mauvais côté, les nombres changent de place et la typographie a l’air empruntée.

Nous développons des plateformes en français, en anglais et en arabe, les nôtres comprises. Voici ce qu’il faut pour que la version arabe paraisse d’origine, et non convertie.

Inverser la mise en page, pas le contenu

Dans une interface de droite à gauche, toute la mise en page passe en miroir : la navigation part de la droite, on lit de droite à gauche, et la progression avance vers la gauche. Tout ne bascule pas pour autant.

• Les logos et les marques gardent leur forme d’origine. Un logotype en caractères latins reste exactement tel quel.
• Les nombres s’écrivent toujours de gauche à droite, même au milieu d’un texte arabe.
• Le code, les adresses e-mail et les URL restent de gauche à droite.
• Les commandes audio et vidéo, comme le bouton lecture ou la barre de progression, gardent en général leur sens : elles représentent le temps, et non l’ordre de lecture.

Le plus délicat, ce sont les icônes directionnelles. Une flèche « suivant » doit pointer vers la gauche en arabe. Une flèche « télécharger », elle, pointe vers le bas dans toutes les langues. Il faut décider icône par icône, et parfois, le mieux est de supprimer la flèche.

Des propriétés logiques partout

La décision la plus rentable se prend dès le premier jour : ne jamais écrire left ni right en CSS. On utilise à la place les propriétés logiques, qui suivent automatiquement le sens de lecture.

/* physical: breaks in Arabic */
.card { margin-left: 24px; text-align: left; }

/* logical: correct in every language */
.card { margin-inline-start: 24px; text-align: start; }

Avec margin-inline-start, padding-inline-end, inset-inline-start et text-align: start, une seule feuille de style fonctionne dans les deux sens. Il suffit ensuite d’ajouter dir="rtl" sur la page pour retourner toute l’interface.

Y passer après coup oblige à reprendre chaque composant. S’y mettre dès le départ ne coûte rien.

La typographie ne se traduit pas

L’arabe est une écriture cursive, avec ses propres proportions. Reprendre une maquette pensée pour l’alphabet latin en changeant simplement de police suffit rarement.

• Choisissez votre police arabe avec soin, pour qu’elle s’accorde à votre police latine en graisse et en caractère, au lieu de laisser le système choisir à votre place.
• Augmentez l’interligne. Les lettres arabes montent et descendent plus loin au-dessus et au-dessous de la ligne.
• N’appliquez jamais d’approche négative. Un espacement serré, élégant en latin, rompt les liaisons entre les lettres arabes.
• Méfiez-vous de l’italique. L’arabe n’a pas de véritable italique. Si votre charte graphique s’appuie sur l’italique pour mettre un mot en valeur, trouvez un autre procédé, par exemple une graisse plus légère.

Nombres, dates et textes mixtes

Dans la réalité, les interfaces mélangent sans cesse les langues : une phrase en arabe avec un nom de société en caractères latins, un prix, un numéro de téléphone. L’algorithme bidirectionnel du navigateur s’en sort la plupart du temps, mais il a besoin d’un coup de main.

Ajoutez dir="auto" au contenu saisi par les utilisateurs, pour que chaque valeur prenne le sens de son propre texte. Formatez dates et nombres avec les outils d’internationalisation de la plateforme plutôt qu’à la main. Et choisissez tôt entre chiffres arabes occidentaux et orientaux, puis tenez-vous-en à ce choix partout.

Des animations qui ont du sens

Les animations aussi ont un sens. Un panneau qui arrive par la droite en anglais doit arriver par la gauche en arabe. Une barre de progression se remplit à partir de la droite. Un soulignement se trace depuis le début de la ligne, donc depuis la droite. Quand le mouvement suit le sens de lecture, l’interface paraît calme. Quand il le contredit, elle sonne faux.

Tester avec des arabophones

Aucune check-list ne remplace un locuteur natif face au produit. Avant le lancement, demandez à des arabophones d’accomplir de vraies tâches, et observez où ils hésitent. Ce qu’ils repèrent en une heure vous aurait demandé des semaines à découvrir seul.

Vous préparez une plateforme qui doit fonctionner en arabe, en français et en anglais ? Parlons-en. Nous prévoyons les trois langues dès le départ.