frontend / css

Propriétés logiques : RTL, i18n et flux d'écriture

Leçon 231 exercice

Explication

Ce que vous allez apprendre

Comprendre la différence entre propriétés "physiques" (margin-left) et "logiques" (margin-inline-start)
Écrire un CSS qui s'adapte automatiquement au sens de lecture (LTR/RTL)
Utiliser les raccourcis groupés margin-inline/margin-block pour simplifier le code
Adapter une mise en page à writing-mode: vertical-rl sans dupliquer les styles
Éviter le piège du mélange entre propriétés physiques et logiques dans un même composant

Dans quel contexte ?

Une entreprise SaaS internationalise son produit pour le marché du Moyen-Orient et doit proposer une interface en arabe, lue de droite à gauche. Avec un CSS écrit uniquement en propriétés physiques (margin-left, text-align: left), toute la mise en page apparaît inversée par rapport au sens de lecture naturel. Cette leçon montre comment écrire un CSS qui s'adapte tout seul, sans dupliquer de classes .rtl.

Étape 1 : des propriétés qui supposent une direction fixe

Depuis le début de ce cours, vous avez utilisé des propriétés "physiques" : margin-left, width, top. Elles décrivent une direction fixe par rapport à l'écran, "gauche" restant toujours "gauche".

Étape 2 : le problème que ça pose

Toutes les langues ne se lisent pas de gauche à droite : l'arabe et l'hébreu se lisent de droite à gauche (RTL). Un site traduit avec du CSS purement physique affiche alors des marges et alignements à l'envers.

Étape 3 : penser en flux plutôt qu'en écran

Les propriétés logiques ne décrivent plus une direction d'écran fixe, mais une position relative au sens de lecture : inline-start signifie "début de ligne", block-start signifie "haut du bloc".

Étape 4 : qui fait la traduction

Le navigateur se charge lui-même de traduire ces notions abstraites en coordonnées d'écran réelles, selon la direction déclarée (dir="rtl") ou le mode d'écriture (writing-mode).

Étape 5 : pourquoi s'en soucier même sans cible RTL aujourd'hui

Adopter les propriétés logiques dès le départ signifie que le CSS s'adapte automatiquement le jour où l'internationalisation devient un besoin, sans réécrire de classes .rtl dupliquées.

Étape 6 : le piège du mélange

Il reste un piège à éviter : mélanger propriétés physiques et logiques dans le même composant recrée le bug qu'on cherche à éviter, dès qu'un margin-left fixe côtoie un margin-inline-start.

Piège fréquent

Un composant qui mélange margin-left: 16px (physique) et padding-inline-start: 8px (logique) redevient incohérent dès que la page passe en RTL : l'un s'inverse, l'autre non. Choisissez une convention pour tout le projet — idéalement 100% logique — plutôt que de mélanger au cas par cas.

Physique	Logique (LTR par défaut)
`margin-left`	`margin-inline-start`
`width` / `height`	`inline-size` / `block-size`
`left` / `right`	`inset-inline-start` / `inset-inline-end`

Et ensuite ?

Une fois ces propriétés adoptées comme réflexe, la prochaine étape explore les fonctions de couleur les plus avancées de CSS moderne.

Commandes & code

Propriétés logiques : RTL, i18n et flux d'écriture

Écrire un CSS qui s'adapte automatiquement au sens d'écriture, sans dupliquer les styles pour l'arabe ou l'hébreu.

/* Physique (gauche/droite fixes) vs logique (relatif au flux d'écriture) */
.physique {
    margin-left: 16px;   /* toujours à gauche, MÊME en RTL -> souvent un bug en i18n */
    text-align: left;
}

.logique {
    margin-inline-start: 16px; /* "début de ligne" -> gauche en LTR, droite en RTL automatiquement */
    text-align: start;         /* s'inverse tout seul selon la direction */
}

/* Mapping physique -> logique (comparaison, pas du CSS exécutable) */
/* width           -> inline-size         */
/* height          -> block-size          */
/* margin-top      -> margin-block-start  */
/* margin-bottom   -> margin-block-end    */
/* margin-left     -> margin-inline-start */
/* margin-right    -> margin-inline-end   */

.carte-logique {
    /* Raccourcis groupés, très utiles */
    margin-block: 16px;    /* top + bottom */
    margin-inline: 24px;   /* left + right (ou l'inverse en RTL) */
    padding-block: 8px;
    padding-inline: 12px;

    /* Bordures */
    border-inline-start: 2px solid blue;
    border-block-end: 1px solid #ddd;

    /* Positionnement */
    inset-inline-start: 0; /* remplace left en LTR / right en RTL */
    inset-block-start: 0;  /* remplace top */
}

<!-- direction : bascule tout un sous-arbre en RTL -->
<html lang="ar" dir="rtl">

/* writing-mode : change carrément l'axe d'écriture (pas que gauche/droite) */
.vertical {
    writing-mode: vertical-rl; /* colonnes de haut en bas, de droite à gauche
                                    (japonais, chinois traditionnel en mise en page verticale) */
}

/* Avec writing-mode vertical, inline-size devient la HAUTEUR visuelle,
   block-size devient la LARGEUR -- c'est exactement l'intérêt des propriétés
   logiques : le CSS reste correct sans rien changer */
.carte {
    inline-size: 300px;
    block-size: auto;
    padding-inline: 16px;
}

/* float/clear logiques */
.image-flottante {
    float: inline-start; /* gauche en LTR, droite en RTL */
}

/* justify-content logique côté flexbox : déjà cohérent avec la direction */
.conteneur-flex {
    display: flex;
    justify-content: start; /* respecte déjà la direction, contrairement à flex-start
                                 dans certains cas de flex-direction: row-reverse */
}

Physique	Logique (LTR par défaut)
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`padding-top`	`padding-block-start`
`left` / `right`	`inset-inline-start` / `inset-inline-end`
`width` / `height`	`inline-size` / `block-size`

Résumé

Les propriétés logiques (inline/block, start/end) s'inversent automatiquement en RTL, sans media query ni classe .rtl.
writing-mode: vertical-rl change l'axe d'écriture entier ; inline-size/block-size restent corrects sans modification.
dir="rtl" sur <html> (ou un sous-arbre) suffit à faire réagir tout le CSS logique déjà en place.
Les raccourcis groupés (margin-inline, padding-block) remplacent avantageusement 2 déclarations physiques.

Exercices pratiques

1 disponible

Mission : une interface arabe qui s'affiche à l'envers

Objectif : Convertir un composant physique en propriétés logiques pour qu'il fonctionne nativement en RTL, et diagnostiquer un mélange incohérent.

Contexte

Sur carte.css, .carte-notification est stylée en margin-left: 16px; padding-left: 12px; text-align: left; border-left: 3px solid var(--couleur-primaire);. Le produit passe en <html lang="ar" dir="rtl"> pour le marché arabophone. Résultat : la bordure colorée reste collée à gauche (là où l'œil termine sa lecture en RTL au lieu de la commencer), et le texte reste aligné à gauche au lieu de suivre le sens de lecture naturel de droite à gauche.

Résoudre l’exercice →