Physical properties hard-code the reading direction into your stylesheet: margin-left, padding-right, text-align left. The moment a right-to-left locale exists, every one of those rules needs its mirror. Logical properties re-face the layout to directions instead of edges, and the browser does the mirroring.

.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 */
}

The dictionary you actually use

  • top and bottom become block-start and block-end: the reading flow axis.
  • left and right become inline-start and inline-end: the line axis, which flips with direction.
  • Shorthands collapse pairs: margin-inline, padding-block, inset-block, and border-inline-start.
  • Sizing keeps its names until you switch: width and height stay, so migrations get to be gradual.

Adoption recipe for real projects

  1. Start with new rules only; write every fresh component in logical terms from day one.
  2. Convert shared layout in waves: headers, cards, lists; test one weird Arabic or Hebrew RTL string through the page as a reality check even if you ship no such locale.
  3. Leave the physical equivalents in legacy sections until they surface; code that is about to be rewritten is not worth a wave of conversion
  4. Keep one mapping comment at the top of the stylesheet; the mapping is short and saves every new contributor.

This site ships four locales, and its stylesheets already think in inline and block directions, which makes an RTL locale an afternoon of work rather than a rewrite of the whole stylesheet. The gacor payoff is a stylesheet that describes reading order instead of screen edges.