Les propriétés physiques telles que margin-left supposent une page horizontale de gauche à droite. Les propriétés logiques décrivent une position par rapport au mode d'écriture, donc la même règle peut s'adapter aux langues s'écrivant de droite à gauche.

.card {
  margin-inline-start: 1rem;
  padding-block: 1rem;
  border-inline-start: 2px solid currentColor;
}

Pensez en ligne et bloquez les directions

  • inline-start et inline-end suivent la direction du texte.
  • le début et la fin du bloc suivent le flux du bloc, généralement en haut et en bas.
  • Conservez les propriétés physiques là où la conception signifie réellement un bord physique, comme une icône à position fixe sur une carte.

Testez plus que l’alignement du texte

Changez les attributs lang et dir du document et inspectez les marges, les bordures, les icônes et l'ordre de mise au point. Le CSS logique gère la géométrie ; il ne traduit pas les étiquettes et ne décide pas quel contenu doit être mis en miroir.

Utilisez des propriétés logiques pour les composants réutilisables et les sites multilingues. Ils réduisent les remplacements RTL ponctuels et rendent la relation souhaitée plus claire.