Dans la série des « trucs que j’ai pas eu l’occasion d’intégrer », le site en langue arabe avait une bonne place : j’avais pu faire de la maintenance très légère sur un site de ce genre, mais je n’en avais pas conçu de A à Z. La particularité de ces sites est d’être écrits de droite à gauche, aussi appelé RTL en langue de Shakespeare.

C’est désormais chose faite, j’ai récemment mis en ligne un site bilingue, à savoir en anglais et en arabe.

C’est la première réalisation que je faisais avec RÖCSSTI qui avait cette contrainte. Ajoutons à cela que ce site est propulsé par un CMS.

La base pour préparer le site à passer en RTL

J’avais eu le plaisir de suivre l’atelier d’Aurélien Masfrand à Paris Web 2012, il a d’ailleurs écrit un article sur le site du Train de 13H37 sur le sujet : Introduction à la localisation, RTL et LTR.

Le premier pas a été d’indiquer dir="rtl" sur l’élément html, en plus de l’attribut lang="ar" bien sûr.

Avec le CMS, j’ai ajouté une classe .ar sur l’élément body, ce qui m’a permis d’avoir un point de repère pour styler les éléments qui ont dû être adaptés pour la langue arabe, une sorte de classe conditionnelle. J’aurais pu cibler via [dir="rtl"], c’est équivalent dans ce cas. À choisir, c’est même mieux, plus généraliste : c’est la solution que j’ai retenue pour RÖCSSTI, qui supporte maintenant la possibilité d’un site en RTL (je reviendrai sur ce sujet dans un prochain billet).

Le but du jeu a été d’inverser l’interface : comme le sens de lecture est inversé, ce qui est à gauche en anglais est à droite en arabe.

La technique d’Aurélien Masfrand consistait à :

• dupliquer la CSS ;
• enlever tout ce qui n’est pas impacté par le changement de sens de lecture ;
• et inverser les valeurs et propriétés restantes dans une CSS spéciale contenu RTL.

La méthode est toujours bonne, néanmoins, vu la relative simplicité du design, j’ai tout laissé dans la même CSS, ainsi une unique CSS gère les deux versions du site. Idem pour les templates, le CMS était assez souple pour permettre de tout gérer directement dans ces derniers.

D’autres détails pour faciliter le RTL

Comme vous avez pu le voir, ce n’est pas excessivement difficile en soi, c’est plus un jeu amusant et un peu déroutant.

Grosso modo, l’adaptation s’est faite ainsi :

• les flottants ont été inversés (float: left; devient float: right;) ;
• les positionnements absolus sont inversés (genre un left: 2em; se transforme en left: auto; right: 2em;) ;
• les alignements aussi (text-align: left devient text-align: right) ;
• les padding et autre margin itou (padding: 0 1.5625em 1.5em 0; devient padding: 0 0 1.5em 1.5625em;) ;
• les contrôles des sliders ont été repositionnés aussi (les boutons « suivant » et « précédent » devant être inversés aussi !).

Là où je me suis posé des questions avec le graphiste, c’est sur les logos : doit-on également les mettre en mode miroir ? La réponse nous a été plus ou moins donnée par le client, s’il y avait du texte, on adaptait, sinon on laissait tel quel.

Je note qu’utiliser le display: table; pour positionner les éléments ne nécessite aucun changement, du coup, cela facilite l’adaptation, vu… qu’il n’y avait rien à faire. Un bon point de plus pour le display: table; !

Là où cela devient plus casse-pied, c’est quand les textes en alphabet latin se mélangent aux textes en arabe. Par exemple, sur la page de contact du GCHRAGD, il a fallu ruser quelque peu.

Dans ce cas, j’ai simplement mis les infos à la ligne (par exemple les numéro de téléphone), afin d’éviter que les contenus soient écrit à l’envers ou de manière anarchique. La meilleure façon de faire est encore de laisser l’algorithme bi-directionnel faire le boulot, et éviter de trop mélanger ces contenus (méthode empirique dictée par l’approche KISS). Quelques flottants et quelques alignements vite posés avec RÖCSSTI, et cette légère difficulté a été vite vaincue.

L’adaptation du site à la langue arabique s'est faite en une matinée. Je suppose qu’une structure très propre, une CSS carrée et un CMS suffisamment souple ont grandement facilité cette grande première pour moi.

Ma'a salâma !