Logical Properties & Writing Modes
Physical properties like margin-left assume text flows left to right, top to bottom. Logical properties like margin-inline-start follow the direction of the text instead — so the same CSS works for English, Arabic, Hebrew and vertical Japanese without changes.
Inline and block directions
- The inline direction is the way text runs in a line — left to right in English, right to left in Arabic, top to bottom in vertical Japanese.
- The block direction is the way lines (and blocks) stack — top to bottom in most languages.
Each direction has a start and an end. In English, inline-start is left and block-start is top.
Logical properties in action
The same CSS puts the accent border on the left for English and on the right for Arabic — because it's tied to the start of the line, not to a physical side.
Common mappings
| Physical | Logical (in left-to-right, horizontal text) |
|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end |
margin-top / margin-bottom | margin-block-start / margin-block-end |
margin-left + margin-right | margin-inline |
padding-top + padding-bottom | padding-block |
width / height | inline-size / block-size |
top, left, … | inset-block-start, inset-inline-start, … |
border-top-left-radius | border-start-start-radius |
text-align: left | text-align: start |
Logical shorthands are handy even for left-to-right sites: margin-inline: auto centres a block, and padding-block: 1rem sets top and bottom padding in one line.
Writing modes
writing-mode: vertical-rl lays text out vertically, with lines stacking from right to left, as in traditional Japanese and Chinese. Notice the blue border: border-block-start moves to follow the new block direction. Vertical writing modes are also useful for rotated labels in designs.
Direction comes from HTML
Set text direction with the HTML dir attribute (dir="rtl"), not the CSS direction property. The attribute is part of the content's meaning, and it's respected even if your stylesheet fails to load.
Mirroring other details
Directional icons like arrows should flip in right-to-left layouts. The :dir() pseudo-class matches elements by their text direction.
Adopting logical properties
- Use them by default in new code — the extra length is small, and you get internationalisation for free.
- Keep physical properties when something truly relates to the screen, not the text: a shadow cast to the right, or a "skip link" that slides in from the top.
- Linters such as Stylelint have plugins that suggest logical equivalents.
Try it yourself
Switch the dir attribute in the HTML between ltr and rtl: