Chapitre 16 : Fondamentaux des propriétés logiques : inline-size et block-size

Remplacer les propriétés physiques (width/height) par des propriétés logiques pour garantir l'indépendance de la direction d'écriture et l'internationalisation.

Le web est mondial. Un site conçu pour un utilisateur français (qui lit de gauche à droite) peut être consulté par un utilisateur arabe (droite à gauche) ou japonais (parfois verticalement). Si vous fixez des dimensions avec width et height, vous imposez une vision "physique" de l'écran. Les propriétés logiques, elles, s'adaptent au flux du texte.

Le concept de dimensions logiques

1. Quoi

Les propriétés logiques sont des directives CSS qui définissent la taille et le positionnement des éléments en fonction de la direction du texte (le writing-mode) plutôt qu'en fonction des axes physiques de l'écran (haut, bas, gauche, droite).

• inline-size : Représente la dimension dans la direction où le texte s'écoule (la ligne). Dans un mode horizontal (comme le français), cela correspond à la largeur. Dans un mode vertical, cela correspond à la hauteur.
• block-size : Représente la dimension perpendiculaire à la direction du texte (l'empilement des blocs). Dans un mode horizontal, cela correspond à la hauteur. Dans un mode vertical, cela correspond à la largeur.

2. Pourquoi

L'utilisation de width et height est ce qu'on appelle une approche "physique". Le problème survient lors de l'Internationalisation (i18n).

Imaginons un composant de carte de profil avec une largeur fixe de 300px. Si vous changez le writing-mode pour un affichage vertical (utilisé dans certaines langues asiatiques), votre "largeur" physique restera horizontale, alors que le flux de lecture est devenu vertical. Le design devient incohérent car l'élément ne s'étire plus dans le sens de la lecture.

En utilisant inline-size, vous dites au navigateur : "Je veux que cet élément mesure 300px dans le sens où l'on écrit". Le navigateur s'occupe alors de traduire cela en width ou en height selon la langue et le mode d'écriture.

3. Comment

A. Syntaxe de base

Voici la correspondance directe pour un mode d'écriture standard (horizontal) :

/* Approche Physique (Ancienne) */
.box-physique {
  width: 200px;  /* Largeur fixe */
  height: 100px; /* Hauteur fixe */
}

/* Approche Logique (Moderne) */
.box-logique {
  inline-size: 200px; /* Largeur en mode horizontal */
  block-size: 100px;  /* Hauteur en mode horizontal */
}

B. Cas concret : Un composant adaptatif

Considérons un badge de notification. Nous voulons qu'il ait une taille cohérente, peu importe si le site est traduit en Arabe (RTL) ou s'il utilise un mode vertical.

:root {
  --badge-inline: 80px;
  --badge-block: 30px;
}

.notification-badge {
  /* On définit la taille selon le flux logique */
  inline-size: var(--badge-inline);
  block-size: var(--badge-block);
  
  background-color: #e74c3c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  
  /* On utilise aussi des marges logiques pour l'espacement */
  margin-block-start: 1rem; 
}

/* Simulation d'un changement de mode d'écriture pour le Japonais vertical */
.vertical-text {
  writing-mode: vertical-rl;
}

Dans cet exemple, si la classe .vertical-text est appliquée, le inline-size (80px) deviendra automatiquement la hauteur du badge, et le block-size (30px) deviendra sa largeur, préservant ainsi la proportion visuelle par rapport au texte.

C. Limitations

Bien que supportées par tous les navigateurs modernes, les propriétés logiques peuvent être déroutantes au début car elles demandent de "dé-apprendre" le réflexe width/height.

De plus, certaines propriétés très spécifiques (comme les animations de transformations rotate ou scale basées sur des axes X/Y) restent physiques. Le passage au logique concerne principalement le layout (le positionnement et la taille) et non les transformations géométriques.

4. Zone de Danger

❌ L'erreur commune : Mélanger propriétés physiques et logiques sur un même élément.

.bad-practice {
  width: 100px;       /* Physique */
  block-size: 50px;    /* Logique */
}

Pourquoi c'est dangereux ? En cas de changement de writing-mode, vous aurez un conflit de définition. Le navigateur devra prioriser l'une ou l'autre, rendant le rendu imprévisible.

✅ La bonne pratique : Choisir un système et s'y tenir. Pour tout projet moderne visant l'accessibilité et l'internationalisation, adoptez le 100% logique.

Transition du Physique vers le Logique

Les propriétés logiques d'espacement

Le même principe s'applique aux marges et aux paddings. Chaque propriété physique a son équivalent logique qui s'adapte au writing-mode.

Correspondance des marges

Propriété physique	Propriété logique	Rôle
margin-top	margin-block-start	Marge au début de l'axe de bloc
margin-bottom	margin-block-end	Marge à la fin de l'axe de bloc
margin-left	margin-inline-start	Marge au début de l'axe de ligne
margin-right	margin-inline-end	Marge à la fin de l'axe de ligne
padding-top	padding-block-start	Padding au début de l'axe de bloc
padding-bottom	padding-block-end	Padding à la fin de l'axe de bloc
padding-left	padding-inline-start	Padding au début de l'axe de ligne
padding-right	padding-inline-end	Padding à la fin de l'axe de ligne

Les raccourcis

Comme pour leurs équivalents physiques, des raccourcis existent pour éviter la répétition :

/* Raccourci block : applique start et end en une seule déclaration */
margin-block: 1rem 2rem;       /* start: 1rem, end: 2rem */
margin-block: 1rem;            /* start ET end : 1rem */

/* Raccourci inline */
margin-inline: 0.5rem 1.5rem;  /* start: 0.5rem, end: 1.5rem */
padding-inline: 1rem;          /* start ET end : 1rem */

Astuce mnémotechnique

• block → penser à la direction des paragraphes (haut/bas en mode horizontal)
• inline → penser à la direction du texte dans une ligne (gauche/droite en mode horizontal)

Questions clés

1. Quelle est la différence fondamentale entre width et inline-size ?

Découvrir la réponse

width est une propriété physique : elle définit toujours la dimension horizontale, peu importe la langue. inline-size est une propriété logique : elle définit la dimension dans le sens de l'écriture. Si le texte est écrit verticalement, inline-size contrôlera la hauteur.

2. Pourquoi block-size est-il préférable à height pour l'accessibilité ?

Découvrir la réponse

Certains utilisateurs utilisent des outils de traduction ou des configurations de navigateur qui changent la direction du texte pour faciliter la lecture. En utilisant block-size, le layout s'adapte automatiquement sans que le contenu ne déborde ou ne se chevauche, garantissant que l'interface reste utilisable (a11y).

3. Que se passe-t-il si j'utilise inline-size dans un document standard en français (LTR) ?

Découvrir la réponse

Le rendu sera strictement identique à l'utilisation de width. Le navigateur interprète le mode d'écriture par défaut comme horizontal, donc inline-size = width.

4. Est-ce que inline-size remplace totalement width ?

Découvrir la réponse

Techniquement oui, pour la majorité des cas de mise en page. Cependant, width reste utile pour des éléments dont la dimension doit rester strictement horizontale quel que soit le contexte (par exemple, une barre de progression très spécifique ou un élément décoratif non lié au texte).

Mise en pratique

Exercice 1 : Reproduction guidée

Objectif : Convertir un bloc physique en bloc logique.

Soit le code suivant :

.card {
  width: 300px;
  height: 200px;
  margin-top: 20px;
  margin-left: 10px;
}

Réécrivez ce code en utilisant exclusivement des propriétés logiques (inline-size, block-size, margin-block-start, margin-inline-start).

Découvrir la solution commentée

.card {
  /* width devient inline-size (dimension du flux de texte) */
  inline-size: 300px;
  
  /* height devient block-size (dimension perpendiculaire au flux) */
  block-size: 200px;
  
  /* margin-top devient margin-block-start (début du bloc) */
  margin-block-start: 20px;
  
  /* margin-left devient margin-inline-start (début de la ligne) */
  margin-inline-start: 10px;
}

Exercice 2 : Adaptation

Objectif : Créer un composant qui s'adapte au changement de direction.

HTML de départ :

<div class="box">Mode horizontal (défaut)</div>
<div class="box vertical">Mode vertical</div>

Stylez .box avec des dimensions logiques, puis créez .vertical qui change le writing-mode en vertical-rl. Vérifiez que la boîte change d'orientation (ce qui était la largeur devient la hauteur) sans modifier les propriétés de taille.

Découvrir la solution commentée

.box {
  /* On définit des tailles logiques */
  inline-size: 200px;
  block-size: 100px;
  background: lightblue;
  border: 2px solid blue;
}

.vertical {
  /* Le changement de mode d'écriture bascule l'interprétation 
     de inline-size et block-size */
  writing-mode: vertical-rl;
}

Exercice 3 : Conception

Objectif : Résoudre un problème de mise en page internationale.

HTML de départ :

<header class="header">
  <div class="logo">Logo</div>
  <nav class="menu">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</header>

Vous développez un site pour une entreprise mondiale. Le logo doit toujours occuper 20% de la "largeur de lecture" et le menu doit occuper le reste.

Utilisez les propriétés logiques pour vous assurer que si le site passe en mode vertical, le logo occupe 20% de la "hauteur de lecture" et le menu le reste.

Découvrir la solution commentée

.header {
  display: flex;
  /* On s'assure que le container s'adapte au flux */
  inline-size: 100%; 
}

.logo {
  /* 20% de la dimension dans le sens de l'écriture */
  inline-size: 20%;
  background: #eee;
}

.menu {
  /* Le reste de la dimension dans le sens de l'écriture */
  inline-size: 80%;
  background: #ddd;
}

/* 
  Si on ajoute writing-mode: vertical-rl au body, 
  le logo fera 20% de la hauteur et le menu 80% de la hauteur,
  tout en restant alignés selon le flux vertical.
*/