Comment traduire les langues RTL dans WordPress : Arabe, Hébreu, Perse
Vous venez de terminer de traduire votre thème WordPress en arabe. Vous téléversez le fichier .mo, changez la langue du site, et le résultat est illisible. Le texte déborde vers la gauche, les boutons se chevauchent et votre mise en page soigneusement conçue a l'air d'être passée à la déchiqueteuse.
Bienvenue dans le monde des langues de droite à gauche (RTL) -- où la traduction n'est que la moitié de la bataille.
L'arabe, l'hébreu et le perse (farsi) sont parmi les langues les plus parlées au monde. L'arabe à lui seul compte plus de 400 millions de locuteurs natifs. Si votre site WordPress ignore ces publics, vous laissez de sérieuses sommes d'argent sur la table. Mais les servir nécessite plus que de remplacer des mots anglais par des mots arabes. Cela nécessite de repenser toute la direction de votre mise en page.
Ce guide couvre tout ce que vous devez savoir : comment RTL fonctionne dans WordPress, comment corriger votre CSS, comment gérer les fichiers .po avec des chaînes RTL, et comment éviter les pièges les plus courants.
Comment RTL fonctionne dans WordPress
WordPress a un support RTL intégré. Lorsque vous définissez la langue de votre site sur l'arabe (ar), l'hébreu (he) ou le perse (fa), WordPress ajoute automatiquement dir="rtl" à la balise <html> et charge une feuille de style rtl.css si votre thème en fournit une.
C'est la théorie. En pratique, la plupart des thèmes sont livrés avec un support RTL minimal ou défectueux.
Ce qui change réellement
Lorsque le mode RTL est activé, le navigateur met en miroir toute la mise en page de la page :
- Le texte s'écoule de droite à gauche.
- Les barres latérales changent de côté.
- L'ordre des menus de navigation est inversé.
- Les valeurs de remplissage et de marge sont inversées (la gauche devient la droite).
- Les icônes ayant une signification directionnelle (flèches, chevrons) doivent être mises en miroir.
Si le CSS de votre thème a été écrit uniquement pour LTR, chaque déclaration margin-left, padding-right, float: left et text-align: left se bat maintenant contre le moteur RTL du navigateur.
Correction de votre CSS pour RTL : un guide pratique
L'approche la plus propre est d'utiliser les propriétés logiques CSS, qui s'adaptent automatiquement à la direction d'écriture du document. Au lieu de left et right, vous utilisez inline-start et inline-end.
Avant : Propriétés physiques (cassent en RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
Après : Propriétés logiques (fonctionne dans les deux sens)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
Avec les propriétés logiques, vous écrivez votre CSS une fois et il fonctionne correctement en anglais et en arabe sans aucune surcharge.
La méthode de surcharge [dir="rtl"]
Si vous ne pouvez pas refactoriser toute votre feuille de style, vous pouvez cibler RTL spécifiquement en utilisant des sélecteurs d'attributs :
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Cela fonctionne, mais cela double votre charge de maintenance. Chaque fois que vous mettez à jour vos styles LTR, vous devez également mettre à jour les surcharges RTL.
Traduire les fichiers PO avec des chaînes RTL
La traduction elle-même introduit des défis qui vont au-delà de la mise en page. Les langues RTL ont des caractéristiques uniques qui font trébucher la plupart des outils automatisés.
Texte bidirectionnel (Bidi) dans les fichiers PO
La complexité réelle apparaît lorsque le texte RTL et LTR se mélangent dans une seule chaîne. Considérez ce modèle WordPress courant :
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
Le marqueur de substitution %s sera remplacé par un nom de produit anglais comme "WooCommerce". Dans la sortie rendue, le navigateur doit afficher le texte arabe allant de droite à gauche, puis passer de gauche à droite pour le mot anglais, puis potentiellement revenir en arrière.
Ceci est appelé texte bidirectionnel (ou "bidi"), et il est géré par l'algorithme bidirectionnel Unicode. La plupart du temps, cela fonctionne automatiquement. Mais lorsque vous avez plusieurs marqueurs de substitution ou des nombres adjacents au texte RTL, l'ordre visuel peut devenir imprévisible.
Erreurs de traduction courantes
Les outils de traduction génériques font plusieurs erreurs spécifiques à RTL :
-
Ordre des marqueurs de substitution inversé. Une chaîne comme
%1$s out of %2$spourrait voir les marqueurs de substitution inversés car l'IA les réorganise pour correspondre à la grammaire arabe. Cela produit une sortie incorrecte comme "10 out of Page" au lieu de "Page out of 10". Apprenez-en davantage sur la protection des variables de code pendant la traduction. -
Directionnalité HTML cassée. Si votre chaîne contient du HTML en ligne comme
<span dir="ltr">, un traducteur naïf pourrait supprimer l'attributdirou le traduire. -
Formes plurielles manquantes. L'arabe a six formes plurielles -- zéro, un, deux, peu, plusieurs et autre. C'est le système pluriel le plus complexe de toutes les langues prises en charge par WordPress. Un outil qui ne génère que deux formes (comme l'anglais singulier/pluriel) laissera votre fichier
.poarabe cassé. Pour une plongée en profondeur dans le fonctionnement des pluriels Gettext, consultez notre guide sur la pluralisation complexe dans WordPress.
Voici à quoi ressemble une chaîne plurielle arabe correctement traduite dans un fichier .po :
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Si l'une de ces six formes est vide ou incorrecte, WordPress reviendra à la chaîne anglaise pour ce nombre spécifique. Vos utilisateurs verront "5 comments" en anglais dispersés dans une interface autrement entièrement arabe.
Tester votre implémentation RTL
Traduire et corriger le CSS ne suffit pas. Vous devez vérifier le résultat dans un vrai navigateur.
Une liste de contrôle de test rapide
- Changez la langue de WordPress en arabe dans Réglages > Général. N'ajoutez pas simplement
dir="rtl"manuellement -- utilisez le vrai réglage de langue pour que WordPress charge ses propres surcharges RTL. - Vérifiez les menus de navigation. Sont-ils mis en miroir ? Les menus déroulants s'ouvrent-ils dans la bonne direction ?
- Inspectez les champs de formulaire. Le texte de saisie doit aller de droite à gauche. Le texte de l'espace réservé doit être aligné à droite.
- Vérifiez le contenu à direction mixte. Les chaînes qui contiennent à la fois de l'arabe et de l'anglais (comme les noms de marque ou les URL) doivent être rendues dans l'ordre visuel correct.
- Testez sur mobile. Les bugs de mise en page RTL sont souvent plus graves sur les petits écrans où il y a moins de place pour les erreurs d'alignement.
Si vos traductions ne s'affichent pas du tout, le problème pourrait ne pas être lié à RTL -- vérifiez d'abord votre compilation de fichier .mo et les chemins de fichier.
Astuce des outils de développement du navigateur
Dans Chrome DevTools, vous pouvez forcer temporairement RTL sur n'importe quelle page sans modifier les paramètres de WordPress :
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Cela vous donne un aperçu rapide de la façon dont votre thème gère RTL avant même de commencer à traduire.
Automatiser la traduction RTL de la bonne façon
La traduction manuelle des langues RTL est coûteuse et lente. Les traducteurs arabes professionnels facturent des tarifs élevés, et il est difficile de trouver quelqu'un qui comprend à la fois la langue et la syntaxe Gettext spécifique à WordPress.
SimplePoTranslate résout ce problème avec un moteur d'IA conscient du contexte qui comprend les défis spécifiques à RTL de manière native :
- Les six formes plurielles arabes sont générées automatiquement. Notre moteur lit l'en-tête
Plural-Formsdans votre fichier.poet produit exactement le nombre de formes dont votre langue cible a besoin. Pas de slotsmsgstrvides, pas de replis en anglais. - Sécurité des marqueurs de substitution. Les variables comme
%s,%det%1$ssont verrouillées pendant la traduction. L'IA ne peut pas les réorganiser, les supprimer ou les corrompre -- même lorsque la grammaire arabe suggère un ordre de mots différent. Apprenez-en davantage sur la façon dont le verrouillage de la syntaxe protège votre code. - Contexte bidirectionnel. L'IA comprend que les chaînes à direction mixte nécessitent une manipulation spéciale et préserve les attributs de directionnalité HTML.
Que vous localisiez un thème de blog pour un public hébreu ou que vous traduisiez une boutique WooCommerce complète en perse, le processus est le même : téléversez votre fichier .po, sélectionnez votre langue cible et téléchargez le fichier traduit. L'ensemble du flux de travail prend des minutes, pas des jours.
Pour une présentation complète du processus de localisation de WordPress, consultez notre guide ultime de la localisation de WordPress.
Cessez de traiter RTL comme une arrière-pensée
Les langues de droite à gauche représentent plus d'un milliard d'utilisateurs potentiels. L'arabe est la cinquième langue la plus parlée au monde. L'hébreu et le perse desservent des marchés essentiels au Moyen-Orient et en Asie centrale.
Si votre site WordPress ne peut pas servir ces utilisateurs avec une expérience soignée et d'aspect natif, ils trouveront un concurrent qui le peut.
La bonne nouvelle : WordPress a déjà l'infrastructure. Votre thème a juste besoin d'un CSS approprié, et vos fichiers .po ont besoin d'un outil de traduction qui respecte la complexité des langues RTL.
Prêt à traduire votre site WordPress en arabe, hébreu ou perse ? Commencez gratuitement sur SimplePoTranslate.com