CSS Logical Properties: Write Layouts That Work in Any Language

Swap margin-left for margin-inline-start and build layouts that automatically mirror for RTL languages. A practical introduction to logical properties for internationalised UIs.

If you've ever built an interface that needed to work in Arabic, Hebrew or any right-to-left language, you know the pain of maintaining two versions of your CSS. Logical properties are the solution.

Physical properties reference directions in the physical viewport: top, right, bottom, left.

Logical properties reference directions relative to the writing mode: block (perpendicular to text flow) and inline (parallel to text flow).

/* Before — physical, breaks in RTL */
.sidebar {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}

/* After — logical, works in any writing direction */
.sidebar {
  margin-inline-start: 24px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--accent);
}

Add dir="rtl" to your html tag and the logical version mirrors itself automatically. The physical version stays on the left regardless.

/* These shorthands are particularly useful */
.card {
  /* top + bottom */
  padding-block: 1.5rem;

  /* left + right (or start + end in RTL) */
  padding-inline: 2rem;

  /* Equivalent to: margin-top + margin-bottom */
  margin-block: 1rem;
}