Les propriétés physiques codent en dur le sens de lecture dans votre feuille de style : marge gauche, remplissage droit, alignement du texte à gauche. Dès qu'une locale de droite à gauche existe, chacune de ces règles a besoin de son miroir. Les propriétés logiques redéfinissent la mise en page en directions plutôt qu'en bords, et le navigateur effectue la mise en miroir.

.card {
  margin-block-start: 1rem;   /* was margin-top */
  padding-inline: 1rem;       /* was padding-left/right */
  border-inline-start: 4px solid var(--brand); /* was border-left */
  text-align: start;          /* was text-align: left */
}

Le dictionnaire que vous utilisez réellement

  • le haut et le bas deviennent le début et la fin du bloc : l'axe du flux de lecture.
  • left et right deviennent inline-start et inline-end : l'axe de la ligne, qui s'inverse avec la direction.
  • Les raccourcis réduisent les paires : margin-inline, padding-block, inset-block et border-inline-start.
  • Le dimensionnement conserve ses noms jusqu'à ce que vous changiez : la largeur et la hauteur restent, les migrations doivent donc être progressives.

Recette d'adoption pour de vrais projets

  1. Commencez uniquement par de nouvelles règles ; écrivez chaque nouveau composant en termes logiques dès le premier jour.
  2. Convertir la mise en page partagée en vagues : en-têtes, cartes, listes ; testez une chaîne RTL arabe ou hébraïque étrange à travers la page pour vérifier la réalité, même si vous n'envoyez pas de tels paramètres régionaux.
  3. Laissez les équivalents physiques dans les sections héritées jusqu'à ce qu'ils apparaissent ; le code qui est sur le point d'être réécrit ne vaut pas une vague de conversion
  4. Conservez un commentaire de mappage en haut de la feuille de style ; le mappage est court et enregistre chaque nouveau contributeur.

Ce site propose quatre paramètres régionaux et ses feuilles de style réfléchissent déjà dans les directions en ligne et en bloc, ce qui fait d'un paramètre régional RTL un après-midi de travail plutôt qu'une réécriture de la feuille de style entière. Le gain très intéressant est une feuille de style qui décrit l'ordre de lecture au lieu des bords de l'écran.