RTL signifie de droite à gauche (Right to Left). Seules quelques langues dans le monde utilisent la direction de texte RTL, mais ces langues concernent plus d’un milliard de personnes. L’ajout de la prise en charge RTL à votre thème est simple et peut considérablement élargir son marché.
Voici deux pages, l’une dans la direction RTL et l’autre dans la direction LTR (normale) :
| Anglais – LTR | Hébreu – RTL |
|---|---|
 |
 |
Vous pouvez voir comment tout ce qui se trouve sur la page RTL apparaît « retourné » horizontalement. C’est comme regarder la page LTR « normale » à travers un miroir. Créer cette image miroir est en fait assez facile. La direction « dir » en CSS fera la plus grande partie du travail et vous n’aurez besoin de corriger que quelques endroits.
Charger un fichier CSS différent pour les langues RTL
WordPress sait quelles langues ont un flux RTL et vous permet de personnaliser facilement leur mise en page. Créez un nouveau fichier rtl.css et placez-le dans le répertoire racine de votre thème.
WordPress chargera le fichier rtl.css après avoir chargé le fichier styles.css normal, de sorte que le fichier CSS RTL n’a besoin de remplacer que les attributs qui doivent changer. Cela signifie que le fichier rtl.css est généralement assez petit pour la plupart des thèmes.
Définir la direction de la page sur RTL
L’attribut « direction » en CSS indique au navigateur la direction de la page. Pour les langues RTL, vous devez le définir sur « rtl ». Il existe un autre attribut « magique » que vous devez définir pour un affichage RTL correct. Il s’appelle « unicode-bidi ». Cet attribut « magique » est assez simple à comprendre lorsque vous avez l’habitude d’écrire en RTL. Il contrôle la façon dont les caractères s’affichent à l’intérieur de la ligne.
Pour un affichage RTL correct, ajoutez ce qui suit au sélecteur .body :
{
direction:rtl;
unicode-bidi:embed;
}
Et voilà, c’est terminé ! Votre thème s’affiche désormais en RTL. Ou presque. Ces deux instructions permettront à la majeure partie de la page de s’afficher correctement. Maintenant, vous devez gérer les exceptions.
Inverser la direction du texte, les flottants et les dégagements
Chaque endroit du CSS où vous définissez la direction du texte et les éléments flottants nécessite une attention manuelle.
Trouvez tous les sélecteurs pour text-align, float et clear. Si l’un d’entre eux spécifie une direction, passez de « right » à « left ». Gardez à l’esprit l’image miroir que nous essayons d’obtenir, cela facilitera la compréhension de cette transformation.
Graphiques impliquant une direction
Une autre chose à surveiller concerne les graphiques ayant une signification de « direction ». Par exemple, si vous créez un diaporama, vous pouvez avoir des flèches pour les éléments suivants et précédents. N’oubliez pas que votre site apparaîtra à travers un miroir dans les langues RTL, vous devez donc également inverser les graphiques directionnels. Si vous utilisez une flèche pointant vers la droite pour « suivant » en LTR, vous devez fournir une flèche pointant vers la gauche pour « suivant » en RTL.
Sélection de polices personnalisées
Les langues RTL n’ont pas les mêmes polices que les langues LTR. Si vous utilisez des polices fantaisie et que la mise en page de votre thème repose sur celles-ci, vous devez trouver des polices de remplacement pour ces langues. Si vous choisissez une police qui n’existe pas dans une langue RTL, le navigateur reviendra à ce qu’il connaît. Il vaut mieux spécifier des polices existantes alternatives que vous appréciez.
Si vous utilisez des polices web standard, vous n’aurez aucun problème.
Comment tester votre thème en RTL
Lorsque vous développez votre fichier CSS RTL, il est recommandé de toujours tester ce que vous faites.
- Changez la langue dans le fichier wp-config.php pour cette langue. Si vous utilisez WPML, il vous suffit d’ajouter une langue RTL à votre site.
Ajouter des langues RTL - Traduisez les textes codés en dur de votre thème (au moins ceux de l’interface publique) dans cette langue. WPML vous permet de le faire en utilisant le module Traduction de chaînes.
Traduire les textes du thème - Obtenez un exemple de contenu dans cette langue. Pour faciliter l’édition en RTL dans l’interface d’administration de WordPress, accédez à votre profil, faites défiler jusqu’au paramètre de langue de l’interface d’administration et définissez la même langue que la langue d’édition.
Modifier le contenu en mode RTL
Vous ne connaissez aucune langue RTL ? Utilisez simplement Google Traduction. La traduction n’aura probablement aucun sens, mais pour les besoins du développement CSS, c’est suffisant.
Maintenant, passez en revue les différents types de contenu de votre site. Veillez à inclure les articles, les pages, la page d’accueil et tout contenu personnalisé que vous créez.
Pour de meilleurs résultats, trouvez quelqu’un qui parle cette langue et demandez-lui de faire une vérification de cohérence pour vous. Votre ami parlant une langue RTL détectera les 5 % de problèmes restants qui vous auront échappé. C’est un « plus », alors n’arrêtez pas vos efforts RTL si vous ne connaissez personne pour vous aider à tester. Dès que vous publierez la version compatible RTL de votre thème, vous recevrez de nombreux commentaires de la part de vos clients. Si vous fournissez 95 % des efforts, ils seront ravis de contribuer aux correctifs pour les 5 % restants.
Bonus – l’interface d’administration de votre thème dans les langues RTL
L’exigence de base pour avoir un thème compatible RTL est que l’interface publique (contenu public) s’affiche correctement dans les langues RTL. C’est la base absolue, sans laquelle personne ne peut utiliser votre thème pour créer des sites dans les langues RTL.
En outre, de nombreux utilisateurs souhaiteront avoir l’interface d’administration de WordPress dans leur langue. Cela signifie également voir les écrans d’administration de votre thème dans l’orientation RTL.
Le moyen le plus simple d’obtenir cette compatibilité RTL pour les écrans d’administration de votre thème est d’utiliser les classes CSS WordPress standard pour les éléments de l’interface graphique. Certes, cela signifie que vous ne pouvez pas utiliser d’effets CSS fantaisie pour égayer votre interface graphique. Mais cela signifie également que votre interface graphique s’intègre parfaitement à l’interface d’administration de WordPress et s’affiche correctement en LTR / RTL.
Si vous devez utiliser votre CSS personnalisé pour les écrans d’administration, vérifiez son apparence dans une langue RTL. Les mêmes règles que vous suivez pour le CSS de l’interface publique s’appliquent également à l’interface d’administration. Inversez les alignements, les flottants et les dégagements ; évitez le positionnement absolu et faites attention aux images.
Une excellente référence – le thème WordPress par défaut
Pour information, les thèmes WordPress par défaut sont tous parfaitement adaptés aux langues RTL. Ouvrez le thème par défaut et recherchez le fichier rtl.css. Vous verrez les modifications apportées au CSS pour le thème par défaut. Généralement, ces modifications sont assez mineures et faciles à suivre.