# Servir les fiches produit avec des logical properties CSS pour un thème WooCommerce prêt pour l’arabe

> margin-left ou margin-right suppose une direction de lecture fixe. Les logical properties CSS s'adaptent automatiquement au sens d'écriture, un prérequis pour un thème WooCommerce multilingue RTL.

- Auteur : WordPress Développement
- Publié le : 2021-06-01
- Mis à jour le : 2021-06-01
- Catégorie : E-commerce
- URL : https://www.wpmoderne.fr/ecommerce/fiches-produit-logical-properties-css-theme-woocommerce-rtl/

## L’essentiel

- margin-left et margin-right supposent une direction de lecture fixe, gauche à droite
- Les logical properties CSS s'adaptent automatiquement au sens d'écriture de la page
- Le remplacement se fait propriété par propriété, sans logique conditionnelle en JavaScript

`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

> L'essentiel à retenir : margin-left et margin-right supposent une direction de lecture fixe, gauche à droite ; Les logical properties CSS s'adaptent automatiquement au sens d'écriture de la page ; Le remplacement se fait propriété par propriété, sans logique conditionnelle en JavaScript

```
.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-position` qui ne disposent pas toutes d'équivalent logique selon le niveau de support du navigateur
- Les grilles CSS complexes, où `grid-template-columns` garde un ordre physique qu'il faut parfois combiner à `direction` pour 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.