Édition Nº13 du 7 août 2012 Retour au sommaire

Introduction à la localisation, RTL et LTR

La toile, ce village mondial. Et pourtant nos sites sont presque toujours écrits avec un alphabet latin. Pas par paresse mais souvent par manque de connaissances sur le sujet des langues de droite à gauche (RTL). Aurélien Masfrand nous offre une belle introduction, de gauche à droite.

Conducteur


Aurélien Masfrand

Arrêts prévus :

Dialogue imaginaire entre deux intégrateurs qui font du CSS. L’un ne comprend rien aux sites en RTL, et l’autre va lui expliquer comment ça marche.

Intégrateur 1 Salut ! Tiens, tu es encore en train d’intégrer ton site… Je croyais qu’il était fini ?

Intégrateur 2 Oui et non, en réalité il est fini mais là je fais l’intégration pour la version en langue arabe.

Intégrateur 1 Refaire l’intégration ? Mais pourquoi ? Changer le texte ne suffit pas ?

Intégrateur 2 Ah non, malheureusement. Il faut revoir l’ergonomie complète sinon les visiteurs ne vont pas vouloir s’attarder. Autant ne pas le traduire dans ce cas.

Intégrateur 1 En effet, tu as raison ; en plus, si tu veux le traduire en chinois, ça sera déjà prêt.

Intégrateur 2 Pour le chinois, c’est déjà prêt depuis la simplification de la langue en 1956, peu de temps après la création de la République Populaire de Chine et dix ans avant la révolution culturelle.

Intégrateur 1 On ne commencerait pas à sortir un peu du sujet de ton site, là ?

Intégrateur 2 En fait non, j’essaie de te faire comprendre l’importance de la culture du visiteur dans la lecture d’un site. Prenons un exemple du livre Typo et web d’Aurélien Foutoyet aux éditions Perousseaux, essaie de lire ce texte :

Texte en typographie gothique
Texte en typographie gothique

Tu trouves ça difficile ? Et pourtant il était parfaitement lisible à une époque. Ce style de typographie était souvent utilisé.

Intégrateur 1 Donc, en gros, tu essaies de me dire qu’il faut connaître parfaitement la culture de son visiteur pour lui faire un site ergonomique ?

Intégrateur 2 L’idéal serait que ça soit ta langue maternelle, mais difficile de faire un site multilingue dans ce cas. Il y a des choses toutes bêtes pour ça. Regarde le site Wikipedia, il utilise une ergonomie en Z

Capture d'écran de wikipedia en langue française
Capture d’écran de wikipedia en langue française

Z parce que c’est le schéma initial de lecture de ton œil quand tu découvres la page : logo en haut à gauche, suivi d’un menu et de la barre de recherche, puis sous le menu à gauche un menu secondaire, et enfin à droite le contenu principal.

Intégrateur 1 Oui, presque tous les sites utilisent le même schéma, il n’y a rien d’innovant.

Intégrateur 2 Exact ! Et en ergonomie, il ne faut pas perturber les habitudes des utilisateurs. Donc, pour les sites en RTL on fera une ergonomie en Z à l’envers. Logo en haut à droite, contenu en bas à gauche.

Capture d'écran de wikipedia en langue arabe
Capture d’écran de wikipedia en langue arabe

Et il y a un deuxième avantage à changer la place du logo du site. Quelqu’un qui parle couramment français et arabe, comment fait-il pour comprendre rapidemment le sens de lecture du site, va t-il faire un Z normal ou à l’envers ? Seule la position du logo pourra l’aider à comprendre rapidement le site.

Intégrateur 1 Mais il faut revoir tout le graphisme alors, ça demande un budget colossal.

Intégrateur 2 Non, on va tout simplement faire du mirroring de site, tout ce qui a une influence horizontale, on le change. Dans la pratique, il y a peu de modifications. Tu dois rajouter un attribut dir="rtl" sur la balise <html> et rajouter une feuille de styles spéciale rtl.css. C’est ma méthode à moi, je préfère conserver la feuille de styles d’origine intacte, ainsi je ne perds pas en maintenabilité. Le serveur s’occupera de charger la feuille de styles supplémentaire selon le besoin du visiteur.

1
2
3
4
5
6
<html dir="rtl">
        <head>
            <link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
            <link rel="stylesheet" href="css/rtl.css" media="all" type="text/css" />
            ...
    </head>

Mais si tu utilises un préprocesseur css comme LESS ou SASS c’est encore mieux, Tu peux tout rassembler en seule feuille de styles.

Ensuite, en CSS il n’y a que quelques propriétés concernées, regarde ma feuille de styles d’origine :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#container {
    float: left;
    padding: 0 5px 10px 0;
    width: 960px;
}
#container p {
    margin: 0 10px 10px 0;
    font-size: 14px;
}
#container.title {
    background: #fc0 url(/img/picto-title.png) 0 3px;
    display: block;
    padding: 10px 0;
    text-align: right;
}
#popup {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 150px;
    height: 300px;
}
p {
    margin: 0 0 0 10px;
}

Je pratique par étapes. Premièrement, supprimer toutes les lignes qui ne seront pas concernées. Il nous reste donc :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {
    float: left;
    padding: 0 5px 10px 0;
}
#container p {
    margin: 0 10px 10px 0;
}
#container.title {
    background: #fc0 url(/img/picto-title.png) 0 3px;
    text-align: right;
}
#popup{
    left: 20px;
}

[pub]

Comme tu le vois, j’ai enlevé tout ce qui n’avait aucune influence avec l’horizontalité du site. Pour le moment, je n’ai modifié aucune ligne.

Maintenant passons à la seconde étape :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#container {
    float: right;
    padding: 0 0 10px 5px;
}
#container p {
    margin: 0 0 10px 10px;
}
#container.title {
    background-position: 100% 3px;
    text-align: left;
}
#popup {
    right: 20px;
    left: auto;
}

La plupart du temps cela se fait simplement, il ne reste que background-position pour nous poser des problèmes.

Le travail le plus important consiste en fait à inverser toutes les images. Les icônes, les puces pour les listes, les images en background, etc… Il faut vraiment penser à tout, une flèche indiquant retour à la page précédente doit changer de sens et aller vers la droite, l’animation d’une barre de chargement, mais pas les images d’horloge ou de planète, qui elles ne changent pas, évidemment. En gros, il faut compter un tiers du temps de l’intégration du site d’origine en plus.

Intégrateur 1 Et il n’y rien en CSS pour l’orientation du texte ?

Intégrateur 2 Il y a la propriété direction qui peut avoir pour valeur ltr ou rtl mais il ne faut pas l’utiliser. Il y a le HTML pour ça, il ne faut pas mélanger le fond et la forme. Le HTML apporte une valeur sémantique avec la balise <bdo>.

1
Ceci est un texte en français <bdo dir="rtl">qui change de sens</bdo> et revient à la normale

Mais en règle générale, il vaut mieux laisser l’algorithme bidi se débrouiller tout seul.

Intégrateur 1 Bidi ? C’est mignon comme nom c’est quoi exactement ?

Intégrateur 2 Bidi pour bidirectionnel. C’est intégré dans tous les navigateurs web. À l’origine, les navigateurs sont faits pour fonctionner de gauche à droite, l’algorithme est là pour changer le sens automatiquement suivant le contexte ou les caractères utilisés. Dans notre alphabet, il passe automatiquement en LTR (left to right), et en arabe en RTL (right to left). Regarde cet exemple, en majuscule un texte en arabe, en minuscule un texte en français ; en dessous le sens de lecture est représenté par les flèches, les numéros indiquent l’ordre de lecture des mots dans la phrase.

1
2
texte en français ARABE EN TEXTE en français ARABE
1---> 2> 3------> <---6 <5 <---4 7> 8------> <---9

Intégrateur 1 Et du coup, ça règle tous les problèmes ? C’est super ça.

Intégrateur 2 Encore perdu ! Il nous reste des trucs comme les parenthèses et les ponctuations qui peuvent poser problème. Exemple :

1
texte en ( français TEXT ) EN ARABE en français ARABE

Deviendra en arabe (sans la traduction):

1
ARABE en français ARABE EN ( TEXT texte en ( français

Intégrateur 1 Mais pourquoi on se retrouve avec deux parenthèses ouvrantes ?

Intégrateur 2 Cela vient de l’algorithme bidi qui ne sait pas dans quel sens mettre les parenthèses. En UTF-8, tu disposes des caractères parenthèses ouvrantes et fermantes mais pas droite ou gauche. En mélangeant les alphabets on provoque une erreur d’affichage. Donc on va l’aider à s’y retrouver grâce à un caractère magique qui existe aussi en entité HTML, &rlm; (right to left mark) et &lrm; (left to right mark). Reprenons le texte précédent mais en rajoutant des parenthèses.

Le texte dans le code :

texte en ( français TEXT ) EN ARABE en français ARABE

Sur un site en LTR la phrase s’affichera ainsi :

1
2
texte en ( français ARABE EN ( TEXT en français ARABE
1---> 2> > 3------> <---6 <5 < <--4 7> 8------> <---9

Et sur un site en RTL :

1
2
ARABE en français ARABE EN ( TEXT texte en ( français 
<---9 7> 8------> <---6 <5 < <--4 1---> 2> > 3------>

On a bien une parenthèse ouvrante et une fermante à chaque fois, mais comme le sens de lecture change on a l’impression que ce sont les mêmes.

Rajoutons maintenant nos marqueurs, le code change entre les deux versions du site :

Code en LTR :

1
texte en ( français TEXT &lrm;) EN ARABE en français ARABE

Code en RTL :

1
texte en &rlm;( français TEXT ) EN ARABE en français ARABE

En plus, ces marqueurs sont à utiliser à chaque changement de direction dans un texte si tu veux respecter le WCAG 2.0 car ici on se repose beaucoup sur les possibilités du navigateur. Les vieux navigateurs sont évidemment moins efficaces, il faut les aider à comprendre le sens du texte, on se retrouve donc confrontés à un problème d’accessibilité, d’où l’intégration de ce point dans les WCAG.

Il y aurait encore beaucoup de choses à dire, l’ergonomie des sites en RTL est en plein essor. Il y a sûrement plein de bonnes pratiques que je ne connais pas encore et qui doivent en plus dépendre de la langue. Problème : les sites qui en parlent le mieux ne sont ni en anglais, ni en français. Je serais curieux d’avoir une discussion sur ce sujet avec un ergonome arabe. Je me trompe sûrement sur plein de choses. Mais au moins je me dis que j’essaie de faire de mon mieux. C’est un peu ça le web, il y a toujours de quoi approfondir quelque chose.

Intégrateur 1 Eh bien merci, je pense qu’il faut que je travaille là-dessus.

Intégrateur 2 En guise de conclusion, j’ajouterai que travailler sur un site c’est avant tout respecter ses visiteurs et que pour les respecter, le mieux est de les connaître.

Intégrateur 1 Bon, je vais expliquer à mon patron que pour faire des meilleurs sites il faut que je quitte le navire un mois pour aller en stage au Maghreb ; ça passe en DIF ?

Introduction à la localisation, RTL et LTR

Note de cet article : 3 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Après une licence pro DA2I spécialisé sur le web à Lille j'ai travaillé dans plusieurs entreprises en tant que développeur-intégrateur, je travailles maintenant à Clever-age. Je n'ai jamais pu abandonner une des deux facettes, j'aime passer d'un domaine à l'autre. Pour preuve je participe à l'organisation du prochain PHP tour à Nantes. J'ai trouvé trop peu de ressource sur Internet sur ce sujet c'est ce qui m'a poussé à écrire cet article.

3 réactions à cet article (RSS)

Nicolas Hoizey

#1

Excellent article qui permet d’aborder ce sujet si complexe, merci !

Tu dis « une flèche indiquant retour à la page précédente doit changer de sens et aller vers la droite », mais est-ce que les boutons de navigation dans l’historique des navigateurs respectent cela ?

Si ce n’est pas le cas, la flèche vers la gauche ne signifie-t-elle pas retour en arrière même en RTL ?

Antoine Lefeuvre

#3

Merci pour cet article détaillé, il va nous être bien utile.

Puisque qu’on parle d’internationalisation et ergonomie, je profite pour faire un peu de promo pour ce manifeste que j’ai (webdesigners) co-écrit avec une traductrice : Translation is UX http://www.TranslationIsUX.com, qui parle du rôle central que joue la traduction dans l’expérience. J’espère que ça pourra vous intéresser.

Réagir à cet article

XHTML : Vous pouvez utiliser ces balises : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>