margin-left: 16px; face à margin-right: 16px; : ces deux déclarations, omniprésentes dans un thème WooCommerce classique, encodent une hypothèse implicite, celle d’une lecture de gauche à droite. Dès qu’un thème doit préparer une variante en arabe, dont le sens d’écriture est de droite à gauche, chaque propriété physique de ce type doit être inversée manuellement, souvent via une feuille de style RTL entièrement dupliquée et maintenue en parallèle de l’originale.
Les logical properties CSS proposent une alternative plus durable : elles décrivent une position relative au flux de lecture plutôt qu’à un côté fixe de l’écran, et s’adaptent automatiquement dès que l’attribut dir de la page change, sans feuille de style séparée à maintenir.
Physique contre logique : la différence concrète
Une propriété physique comme margin-left désigne toujours le côté gauche de l’écran, quel que soit le sens de lecture du contenu. Une propriété logique comme margin-inline-start désigne le début de la ligne de texte selon le sens d’écriture actif : la gauche en français, la droite en arabe. Le navigateur résout cette correspondance lui-même à partir de l’attribut dir ou de la propriété direction appliquée à la page.
Remplacer les propriétés d’une fiche produit
.produit-fiche__prix {
margin-inline-start: 16px;
padding-inline-end: 8px;
}
.produit-fiche__badge-stock {
inset-inline-start: 12px;
border-inline-start: 2px solid currentColor;
}Le tableau suivant recense les équivalences les plus utilisées sur une fiche produit WooCommerce classique :
| Propriété physique | Équivalent logique |
|---|---|
| margin-left | margin-inline-start |
| margin-right | margin-inline-end |
| padding-left / padding-right | padding-inline-start / padding-inline-end |
| left / right (positionnement) | inset-inline-start / inset-inline-end |
| text-align: left | text-align: start |
Ce que ce remplacement supprime dans le thème
Un thème WooCommerce préparé pour l’arabe via une extension comme Polylang ou WPML nécessite habituellement une feuille de style secondaire chargée conditionnellement quand la langue active est RTL, avec chaque déclaration physique inversée manuellement. En passant aux propriétés logiques, cette feuille de style devient inutile pour la totalité des règles de marge, de remplissage et de positionnement : seule la propriété direction: rtl, définie sur l’élément racine par WordPress selon la langue active, suffit à réorienter l’ensemble de l’affichage.
Ce qui reste à traiter au cas par cas
- Les icônes directionnelles, comme une flèche « suivant », qui doivent être physiquement retournées, pas seulement repositionnées
- Les propriétés
background-positionqui ne disposent pas toutes d’équivalent logique selon le niveau de support du navigateur - Les grilles CSS complexes, où
grid-template-columnsgarde un ordre physique qu’il faut parfois combiner àdirectionpour un rendu correct
Support des navigateurs à cette date
D’après la documentation MDN sur les logical properties, la majorité des propriétés de marge, de remplissage et de positionnement bénéficient d’un support large sur les navigateurs modernes à cette date. Les propriétés plus récentes, comme celles liées aux bordures arrondies logiques, restent à vérifier au cas par cas avant un déploiement en production sur un thème très visité.
Notre conseil pour tout nouveau développement de thème, même sans besoin RTL immédiat : écrire directement en propriétés logiques dès le départ coûte le même effort qu’écrire en propriétés physiques, et évite une réécriture complète le jour où un client demande une variante multilingue RTL.
Une migration progressive plutôt qu’une réécriture complète
Sur un thème existant déjà en production, il n’est pas nécessaire de tout convertir en une seule fois. La migration peut se faire composant par composant, en commençant par les zones les plus visibles d’une fiche produit, comme le prix et le bouton d’ajout au panier, avant de traiter progressivement le reste des gabarits. Les propriétés physiques et logiques cohabitent sans conflit tant qu’elles ne s’appliquent pas au même élément avec des valeurs contradictoires.
En résumé
Les logical properties CSS ne sont pas une astuce réservée aux projets multilingues déjà engagés : elles constituent une bonne pratique par défaut pour tout thème WooCommerce qui pourrait un jour desservir une langue à sens de lecture inversé, sans coût de maintenance supplémentaire une fois l’habitude prise.
