Chapter 1 · Practice 4 of 4

Use logical properties so layouts work in every writing direction

From Foundations: support, units and a sane base

Why it matters

margin-left means left in every language. In a right to left language such as Arabic or Urdu, the space you meant to put at the start of the line ends up at the end. Logical properties describe direction relative to the text flow instead:

Physical	Logical
`margin-left`	`margin-inline-start`
`padding-top`, `padding-bottom`	`padding-block`
`width`	`inline-size`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`

Even if you only support left to right languages today, logical properties cost nothing and make a future translation much cheaper. They also pair naturally with container queries, which measure inline-size.

Example

CSS

.notice {
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-inline-start: 4px solid var(--color-accent);
  text-align: start;
}