# Logical properties CSS dans les styles globaux : margin-inline plutôt que left

> Préparer un thème compatible RTL sans dupliquer ses règles d'espacement : les propriétés logiques CSS remplacent left et right dans theme.json.

- Auteur : WordPress Développement
- Publié le : 2025-01-04
- Mis à jour le : 2025-01-04
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/logical-properties-css-margin-inline/

## L’essentiel

- Les propriétés logiques suivent le sens de lecture, pas un côté fixe
- margin-inline remplace margin-left et margin-right combinés
- Un seul theme.json sert les langues LTR et RTL

`margin-left: 24px;` a-t-il vraiment un sens dans une mise en page qui doit aussi fonctionner en arabe ou en hébreu ? Une fois le thème traduit et livré à un client dont le site existe en version RTL, la question cesse d'être théorique : « gauche » et « droite » ne correspondent plus à « début » et « fin » de ligne.

Les propriétés logiques CSS résolvent ce problème à la racine, en remplaçant les repères physiques (haut, bas, gauche, droite) par des repères relatifs au sens d'écriture (bloc et ligne). Dans un thème à blocs, elles s'intègrent directement dans `theme.json`, sans code supplémentaire ni feuille de style séparée pour le RTL.

## Physique contre logique : la différence concrète

Une propriété physique comme `margin-left` désigne toujours le même côté de l'écran, quel que soit le sens de lecture. Une propriété logique comme `margin-inline-start` désigne le début de la ligne de texte : à gauche en français, à droite en arabe. Le navigateur fait la traduction automatiquement en fonction de l'attribut `dir` du document et de la propriété `writing-mode`.

Les correspondances les plus utiles dans un thème :

- `margin-inline-start` / `margin-inline-end` remplacent `margin-left` / `margin-right`.
- `margin-inline` fixe les deux côtés en une seule déclaration, l'équivalent logique de `margin-left` + `margin-right` identiques.
- `margin-block-start` / `margin-block-end` remplacent `margin-top` / `margin-bottom`.
- `padding-inline` et `padding-block` suivent la même logique pour les espacements internes.

## Où l'utiliser dans theme.json

Les styles globaux acceptent des valeurs CSS arbitraires dans certains blocs via la propriété `css`, ou plus simplement dans les styles d'éléments et de blocs déjà couverts par le schéma. Pour un espacement de bloc générique, la déclaration se fait au niveau du bloc concerné :

> L'essentiel à retenir : Les propriétés logiques suivent le sens de lecture, pas un côté fixe ; margin-inline remplace margin-left et margin-right combinés ; Un seul theme.json sert les langues LTR et RTL

```
{
  "version": 2,
  "styles": {
    "blocks": {
      "core/group": {
        "css": "margin-inline: var(--wp--preset--spacing--50); padding-inline: var(--wp--preset--spacing--40);"
      }
    }
  }
}
```

La propriété `css` au sein d'un bloc dans `theme.json` accepte une chaîne de règles CSS brutes, injectées dans une règle ciblant ce bloc précis. C'est le point d'entrée le plus direct pour des propriétés logiques que le schéma structuré de `theme.json` ne couvre pas nativement pour tous les cas.

## Le cas des marges de la mise en page globale

Pour les réglages de mise en page générale (largeur de contenu, largeur large), les valeurs restent gérées par les variables de préréglage `contentSize` et `wideSize`, qui reposent déjà sur `margin-inline: auto` en interne côté cœur — aucune adaptation à faire de ce côté, le centrage automatique fonctionne de la même façon quel que soit le sens de lecture.

C'est surtout au niveau des espacements asymétriques (un bloc décalé d'un seul côté, une bordure d'accent sur un côté précis) que la bascule vers les propriétés logiques évite un dédoublement de règles.

## Éviter le piège du rtl.css dupliqué

L'approche historique pour rendre un thème compatible RTL consistait à maintenir un fichier `rtl.css` séparé, chargé automatiquement par WordPress quand la langue du site l'exige, et contenant l'inverse de chaque règle physique du thème. Cette approche fonctionne, mais double la charge de maintenance : chaque ajustement d'espacement doit être répété, dans le bon sens, dans les deux fichiers.

Les propriétés logiques ne remplacent pas totalement ce fichier — certains ajustements très spécifiques au RTL (icônes à retourner, par exemple) restent hors de leur portée — mais elles éliminent la majorité des règles d'espacement et de bordure qui composaient jusqu'ici l'essentiel d'un `rtl.css` de thème à blocs.

### Compatibilité navigateur

Les propriétés logiques de base (`margin-inline`, `padding-inline`, `margin-block`, `padding-block`) sont prises en charge par tous les navigateurs modernes ciblés par un thème WordPress actuel. Aucune solution de repli n'est nécessaire pour ces propriétés précises.

## Vérifier le résultat

Le test le plus fiable reste manuel : ouvrir le site avec l'attribut `dir="rtl"` forcé (via les outils de développement du navigateur, en éditant temporairement l'attribut sur la balise `html`) et vérifier que les espacements suivent bien le sens de lecture inversé, sans qu'aucune règle physique ne vienne casser la mise en page dans ce sens.

> Sur un thème destiné à plusieurs langues, la règle interne est simple : aucune nouvelle propriété physique d'espacement n'entre dans `theme.json` sans qu'on ait d'abord vérifié son équivalent logique.

## En résumé

Passer aux propriétés logiques dans les styles globaux d'un thème à blocs n'ajoute pas de complexité : c'est en réalité une simplification, puisqu'un seul jeu de règles sert toutes les directions de lecture. Le seul effort réel consiste à prendre le réflexe au moment d'écrire chaque nouvelle règle d'espacement, plutôt que de corriger après coup.