# rtl.css dans un thème WordPress : le générer sans y perdre son latin > Un client s'ouvre au marché arabophone et demande un site lisible de droite à gauche. is_rtl(), génération du fichier et pièges de maintenance à deux feuilles de style, expliqués. - Auteur : Clément Hadrot - Publié le : 2020-09-16 - Mis à jour le : 2020-09-16 - Catégorie : Thèmes - URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/rtl-css-theme-wordpress-generer/ ## L’essentiel - WordPress charge rtl.css automatiquement si la langue l'exige - is_rtl() permet un test conditionnel en PHP comme en logique métier - Deux feuilles de style à synchroniser, un risque de désynchronisation réel Une PME du secteur textile m'a contacté après avoir signé un partenariat de distribution avec un revendeur basé aux Émirats arabes unis. Le site vitrine existant, en français uniquement, devait recevoir une version arabe complète. Le client s'attendait à ce qu'un simple plugin de traduction règle le problème, sans se douter que l'arabe se lit de droite à gauche et que cela change concrètement la disposition visuelle du thème, pas seulement les chaînes de texte. Ce tutoriel couvre exclusivement la partie thème : comment WordPress gère le RTL au niveau du rendu, comment produire un fichier `rtl.css` correct et quels pièges de maintenance surviennent une fois les deux feuilles de style en place. La traduction du contenu lui-même relève d'un plugin dédié, hors sujet ici. ## Comment WordPress détecte qu'il faut du RTL Le sens de lecture dépend de la langue installée sur le site, définie dans `wp-config.php` via la constante `WPLANG` ou choisie dans les réglages généraux. WordPress connaît la direction associée à chaque langue disponible dans son catalogue de traductions ; l'arabe, l'hébreu, le persan et quelques autres sont marqués RTL nativement, sans configuration supplémentaire côté thème. La fonction `is_rtl()` renvoie un booléen basé sur cette détection. Elle est utilisable partout, dans les templates comme dans `functions.php`, pour adapter un comportement sans dépendre uniquement de CSS. ``` if ( is_rtl() ) { $icon_position = 'right'; } else { $icon_position = 'left'; } ``` ## Le chargement automatique de rtl.css C'est le mécanisme le moins connu : si un fichier nommé `rtl.css` existe à la racine du thème (ou dans le même dossier qu'une feuille de style enregistrée), WordPress le charge automatiquement à la suite de la feuille principale, sans qu'aucun code supplémentaire ne soit nécessaire, à condition d'utiliser `wp_enqueue_style()` normalement. Le cœur ajoute lui-même un lien vers `{handle}-rtl.css` quand `is_rtl()` est vrai et que le fichier existe. ``` function pme_enqueue_styles() { wp_enqueue_style( 'pme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) ); } add_action( 'wp_enqueue_scripts', 'pme_enqueue_styles' ); ``` Avec ce code, si `rtl.css` existe à la racine du thème, WordPress l'enregistre automatiquement en tant que `pme-style-rtl` et le charge après `style.css` pour les visiteurs en langue RTL. Aucune condition supplémentaire n'est à écrire dans `functions.php`. > L'essentiel à retenir : WordPress charge rtl.css automatiquement si la langue l'exige ; is_rtl() permet un test conditionnel en PHP comme en logique métier ; Deux feuilles de style à synchroniser, un risque de désynchronisation réel ## Générer rtl.css : l'automatisation plutôt que la copie manuelle Écrire `rtl.css` à la main en dupliquant `style.css` et en inversant chaque propriété de marge ou de position est source d'erreurs et de désynchronisation rapide. J'utilise un outil de conversion automatique, RTLCSS, disponible en paquet Node, qui inverse les propriétés directionnelles (`margin-left` devient `margin-right`, `float: left` devient `float: right`, etc.) sans toucher aux propriétés neutres. ``` npm install -g rtlcss rtlcss style.css rtl.css ``` Ce script s'intègre facilement à une tâche de build existante, déclenchée à chaque modification de `style.css`. Sur le projet textile, je l'ai branché sur un script npm dédié plutôt que sur un outil de build lourd, le thème restant par ailleurs classique et sans bundler. ## Les pièges de maintenance à deux feuilles de style Le vrai risque n'est pas de générer `rtl.css` une première fois, mais d'oublier de le régénérer après chaque modification de `style.css`. J'ai vu des thèmes où `rtl.css` datait de plusieurs mois : le site arabe affichait alors un mélange de règles à jour et de règles inversées obsolètes, avec des marges qui ne correspondaient plus à rien. - Ne jamais modifier `rtl.css` à la main : toute correction doit passer par une régénération complète depuis `style.css`. - Ajouter la génération de `rtl.css` à la checklist de déploiement, au même titre que la minification. - Tester visuellement les deux sens de lecture après chaque changement de mise en page, pas seulement le sens par défaut du développeur. Certaines propriétés ne se laissent pas inverser correctement par un outil automatique : les icônes directionnelles (flèches, chevrons) ou les images contenant du texte doivent être gérées manuellement, généralement via une classe conditionnelle ajoutée en PHP grâce à `is_rtl()` plutôt que par CSS pur. ``` → ``` ## Cas des sous-thèmes et thèmes enfants Un thème enfant peut fournir son propre `rtl.css`, chargé de la même façon automatique tant que la feuille de style enfant est enregistrée avec `wp_enqueue_style()`. Sur le projet textile, j'ai gardé le `rtl.css` du thème parent intact et ajouté un `rtl.css` spécifique au thème enfant pour les quelques composants personnalisés, évitant ainsi de toucher au thème parent partagé avec d'autres sites du même client. ## En résumé Le support RTL d'un thème WordPress repose sur un mécanisme de chargement automatique simple, à condition d'enregistrer ses styles proprement avec `wp_enqueue_style()` et de fournir un fichier `rtl.css` à jour. La vraie difficulté n'est pas technique mais organisationnelle : garder les deux feuilles de style synchronisées dans la durée, en s'appuyant sur un outil de génération automatique plutôt que sur une maintenance manuelle vouée à diverger.