Un site et une CSS en right to left

Un site et une CSS en right to left (le 03/02/2014)

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.

Geneva Centre for Human Rights Advancement and Global Dialogue

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 !

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1610

10 commentaires

Posté par Oncle Jo le 04/02/2014 à 9:25:37
J'ai lu ton article avec plaisir mais plusieurs fois tu intervertis dans la texte « ltr » et « rtl ».

Notamment ici : « Le premier pas a été d’indiquer dir="ltr" sur l’élément html, en plus de l’attribut lang="ar" bien sûr. » ou encore « J’aurais pu cibler via [dir="ltr"] ».

Les habitudes ont la vie dure (clin d’oeil)
Posté par Nico le 04/02/2014 à 9:57:50
Oui, j'ai laissé ces deux coquilles, pas une histoire d'habitude, mais simplement de fatigue, j'ai fini d'écrire ça hier soir, et visiblement, j'avais l'esprit non pas LTR, mais sens dessus-dessous (Sourire qui tue)

C'est corrigé, merci de l'avoir repéré.
Posté par Gaël le 04/02/2014 à 10:49:55
J’en retiens surtout que cette facilité apparente, tu l’as provoquée grâce à toute l’expérience et les bonnes pratiques accumulées dans RÖCSSTI. Aurait-ce été aussi simple sans tout ce bagage professionnel ?

(En vrai ça veut dire : c’est du super boulot, mais ça ne compte qu’à moitié parce que tu es un vieux briscard du web qui fait régulièrement du super boulot (clin d’oeil) ).
Posté par Nico le 04/02/2014 à 13:53:35
Certes, avec de la pratique, on aime la simplicité, et cette dernière… simplifie bien le travail (!), mais comme tu pourras le voir, rien de bien complexe dans ce que j'ai fait.

Une bonne validation d'une méthode ou d'une approche, selon moi, c'est si elle te permet de faire de nouvelles choses (sourire)
Posté par dd le 04/02/2014 à 20:15:26
Il fonctionne bien ce site.
Avec le CMS SPIP les langues RTL sont supportées par défaut et il est même possible de naviguer d'une traduction à une autre pour chaque page sans revenir à l'accueil.
Posté par Nico le 07/02/2014 à 9:14:42
Dd : oui, le switch de langue est prévu, je n'ai juste pas eu le temps de le préparer (le site a été développé de manière très rapide).
Posté par Stéphane Deschamps le 11/02/2014 à 13:52:44
J'ai la chance de faire du sass/compass.

Je crée donc un fichier styles-rtl.scss avec un $is-rtl:true; et je fais des bascules à base de @if / @else.

Voilà voilà.
Posté par Nico le 11/02/2014 à 14:17:52
Oui, c'est ce que j'ai fait pour RÖCSSTI en version LESS et Sass : https://github.com/nico3333fr/ROCSSTI/blob/master/sass/rocssti-fr.scss (clin d’oeil)
Posté par tetue le 23/07/2016 à 11:56:26
Mais, mais, mais… Y'a pas des scripts automatisant ça ? J'ai réalisés plusieurs sites multilingues multidirectionnels (et je m'apprête justement à en refaire un), sans jamais avoir besoin d'écrire (à la main, moi-même) une ligne de CSS pour ça (ni même en preprocessing), la feuille de styles RTL étant générée automatiquement.

Les seules adaptations à faire concernent les fichiers graphiques, soit quelques images (flèches, puces…) à passer en miroir.
Posté par Nico le 23/07/2016 à 16:44:15
J'imagine que selon le CMS utilisé, les adaptations doivent être bien allégées. Tu tournes sur quel type de CMS ?

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.