Propriétés logiques en CSS : des marges et des espacements qui suivent le sens d'écriture

Un site traduit en arabe ou en hébreu s'affiche de droite à gauche, et tout ce qui était collé à gauche en français devrait basculer à droite. Écrit avec margin-left et padding-right, ce site oblige à réécrire chaque propriété directionnelle pour la version traduite, propriété par propriété, composant par composant.

Les propriétés logiques évitent ce doublon en décrivant un espace ou une position par rapport au sens de lecture du texte plutôt que par rapport aux bords physiques de l'écran.

Définition

Une propriété logique comme margin-inline-start ou padding-block-end remplace une propriété physique comme margin-left ou padding-bottom, en décrivant sa position par rapport au flux du texte : inline désigne le sens dans lequel le texte s'écrit sur une ligne, block le sens dans lequel les blocs s'empilent les uns sous les autres.

.carte {
  margin-inline-start: 24px; /* à gauche en français, à droite en arabe */
  padding-block: 16px 24px; /* padding-top puis padding-bottom */
}

En français comme dans la plupart des langues latines, inline-start correspond à la gauche et block-start au haut. Rien dans le CSS n'a besoin de changer pour qu'une traduction en arabe inverse automatiquement ce résultat.

Exemple concret : le même CSS, deux sens de lecture

La bascule se pilote par l'attribut HTML dir ou par la propriété CSS direction, sans toucher une seule ligne du reste de la feuille de style.

/* le même bloc CSS s'applique aux deux balises HTML suivantes */
.carte {
  margin-inline-start: 24px;
}

/* <div class="carte" dir="ltr">  -> 24px à gauche */
/* <div class="carte" dir="rtl">  -> 24px à droite, sans changer le CSS */

Les raccourcis sans start ni end

Quand la même valeur s'applique aux deux côtés d'un axe, un raccourci évite de répéter start et end : margin-inline vaut pour margin-inline-start et margin-inline-end à la fois, exactement comme margin couvre les quatre côtés physiques en une seule déclaration.

.section {
  margin-inline: auto; /* centre horizontalement, quel que soit le sens */
  padding-inline: 20px; /* padding-left et padding-right à la fois, en LTR */
}

Au-delà des marges et du padding

text-align connaît aussi ses propres valeurs logiques, start et end, qui remplacent avantageusement left et right pour rester alignées avec le sens d'écriture. La taille elle-même en profite : inline-size remplace width et block-size remplace height, ce qui devient utile dès qu'un mode d'écriture verticale entre en jeu, comme certains titres en japonais. La position elle-même suit ce même vocabulaire : inset-inline-start et inset-block-end remplacent respectivement left et bottom sur un élément positionné, avec exactement la même bascule automatique selon le sens d'écriture, sans qu'aucune valeur ne doive être recalculée à la main.

Questions fréquentes

Non, seulement là où le sens d'écriture compte réellement : un site prévu pour plusieurs langues, dont certaines de droite à gauche, ou un contenu susceptible d'utiliser un mode d'écriture vertical. Un projet strictement en français ou en anglais, sans traduction prévue à court ou moyen terme, n'en tire aucun bénéfice visible dans l'immédiat.

inline suit le sens dans lequel une ligne de texte s'écrit, horizontal dans la plupart des langues occidentales. block suit le sens dans lequel les paragraphes s'empilent, verticalement dans ces mêmes langues. Un mode d'écriture vertical, plus rare mais bien réel sur le web, peut inverser les deux d'un coup.

Oui, les versions les plus courantes de margin-inline, padding-block et inset sont prises en charge par tous les navigateurs modernes depuis plusieurs années, sans nécessiter de préfixe ni de solution de repli.