La droite-à-gauche bien faite : leçons d'un site pensé pour l'arabe
CSS logique, flèches inversées, chiffres latins et polices sans lettres arabes : les détails qui rendent une interface arabe naturelle plutôt que simplement retournée.
Dahmane Abdelmalek
23 oct. 20263 min de lecturePartie 2 sur 3
La plupart de mes clients sont arabophones, et j'ai vu ce qui arrive en général aux versions arabes des sites : la mise en page anglaise, retournée à la dernière minute, avec des flèches qui pointent du mauvais côté et des nombres qui se lisent à l'envers.
Sur ce site, l'arabe faisait partie du design dès le premier jour. Voici les détails qui ont fait la différence.
Penser début et fin, pas gauche et droite
Mettre dir="rtl" sur la page inverse le texte, mais chaque margin-left et chaque left: 0 de la feuille de style restent exactement où ils étaient. La solution, c'est de ne plus écrire gauche ni droite du tout.
Les propriétés logiques de CSS décrivent le début et la fin d'une ligne, et Tailwind les propose pour tout : ps- et pe- pour les marges intérieures, ms- et me- pour les marges, border-s, inset-s, text-start. La colonne des dates, les puces bleues de cet article, les séparateurs entre les chiffres et le menu coulissant les utilisent tous. En arabe, tout passe à droite, sans une ligne de CSS en plus.
@utility square-bullets {
& ul > li {
@apply relative ps-5;
}
& ul > li::before {
content: '';
@apply absolute inset-s-0 top-[0.7em] size-1.5 bg-primary;
}
}Inverser ce qui indique, pas ce qui illustre
Les flèches qui signifient « suivant » ou « retour » doivent pointer dans l'autre sens en arabe. Un logo, un bouton lecture ou une coche, non. Seules les icônes de direction s'inversent, et seulement sur les pages de droite à gauche :
<ArrowRightIcon aria-hidden className="size-4 rtl:rotate-180" />La flèche en diagonale, qui signifie « s'ouvre ailleurs », est retournée horizontalement avec rtl:-scale-x-100, pour continuer de pointer vers le haut.
Garder les nombres de gauche à droite
L'arabe s'écrit de droite à gauche, mais les nombres s'y lisent toujours de gauche à droite. Ça fonctionne pour un nombre seul et ça casse pour un intervalle : « 15–25% » peut s'afficher « 25%–15 ». Deux règles corrigent cela :
- Les valeurs qui mêlent chiffres et symboles reçoivent leur propre sens :
<span dir="ltr">15–25%</span>. - Les dates et les durées utilisent les chiffres latins, la norme en Algérie et dans tout le Maghreb, pour correspondre aux nombres saisis dans le CMS.
// Arabic uses Latin digits to match the CMS content ("19/20", "15–25%").
const INTL_LOCALES: Record<Language, string> = {
en: 'en',
ar: 'ar-u-nu-latn',
fr: 'fr',
}Vérifier ce que contiennent vraiment ses polices
IBM Plex a une excellente police arabe, IBM Plex Sans Arabic. Mais IBM Plex Mono, la police à chasse fixe des étiquettes et du code, ne contient aucune lettre arabe. Chaque mot arabe dans une étiquette à chasse fixe s'affichait dans une police système, avec des lettres qui ne se liaient pas.
La solution tient en une ligne dans la pile de polices : Plex Mono pour le texte latin, puis Plex Sans Arabic pour tout ce que Plex Mono ne sait pas dessiner.
@theme {
/* Plex Mono has no Arabic letters; without Plex Sans Arabic next, browsers
fall back to a system monospace font that renders Arabic disconnected. */
--font-mono:
'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, SFMono-Regular,
Menlo, Consolas, monospace;
}Les petits détails
- L'arabe a besoin de plus d'espace entre les lignes que le texte latin : les pages en arabe utilisent une hauteur de ligne de 1,75.
- Les listes assemblées dans le code utilisent la virgule arabe « ، » au lieu de « , ».
- Les initiales, comme celles affichées pour un projet sans capture d'écran, sont séparées par un caractère invisible, l'antiliant sans chasse. Sans lui, deux lettres arabes se lient et se lisent comme un mot.
Tester comme un visiteur
Rien de tout cela ne se voit en relecture de code. Chaque page de ce site est vérifiée en arabe dans un vrai navigateur, y compris en largeur de téléphone : le menu glisse-t-il depuis la gauche, les flèches pointent-elles du bon côté, quelque chose déborde-t-il ? C'est plus long que de vérifier la page anglaise, et c'est le seul moyen d'offrir aux visiteurs arabophones un site qui semble fait pour eux.
La partie 3 passe derrière le contenu lui-même : comment le Markdown et le code du CMS deviennent du HTML sûr et coloré, sur le serveur.
Newsletter
Recevez les nouveaux articles par e-mail
Un e-mail par nouvel article. Désabonnement à tout moment.
Vous préférez un lecteur de flux ? Flux RSS
Réponses
Contact
Un projet en tête ?
Construisons-le.
Ouvert aux postes en télétravail et aux missions freelance.