|$ curl https://forge-ai.dev/api/markdown?path=docs/css/logical-properties
$cat docs/logical-properties-&-writing-modes.md
updated Recently·20 min read·published
Logical Properties & Writing Modes
◆CSS◆Intermediate
Introduction
CSS logical properties map physical directions (top, right, bottom, left) to the document's writing mode. Instead of hard-coding physical directions, you use flow-relative keywords like block-start, inline-end, block-size, and inline-size. This enables layouts that automatically adapt to vertical writing modes (Chinese, Japanese, Korean) and right-to-left scripts (Arabic, Hebrew).
Property Mapping
Physical properties map to logical equivalents based on the writing direction.
logical-mapping.css
CSS
| 1 | /* Physical */ |
| 2 | margin-top: 8px; |
| 3 | padding-right: 12px; |
| 4 | border-left: 2px solid; |
| 5 | width: 100%; |
| 6 | height: auto; |
| 7 | |
| 8 | /* Logical equivalent */ |
| 9 | margin-block-start: 8px; |
| 10 | padding-inline-end: 12px; |
| 11 | border-inline-start: 2px solid; |
| 12 | inline-size: 100%; |
| 13 | block-size: auto; |
| 14 | |
| 15 | /* Shorthands */ |
| 16 | margin: 8px 12px; /* physical */ |
| 17 | margin-block: 8px; /* block-axis only */ |
| 18 | margin-inline: 12px; /* inline-axis only */ |
| 19 | padding-block: 4px 8px; /* block-start block-end */ |
Text-align & Positioning
Positioning and alignment also have logical equivalents.
logical-positioning.css
CSS
| 1 | /* Physical */ |
| 2 | text-align: left; |
| 3 | position: absolute; |
| 4 | top: 0; |
| 5 | right: 0; |
| 6 | |
| 7 | /* Logical equivalent */ |
| 8 | text-align: start; /* left in LTR, right in RTL */ |
| 9 | position: absolute; |
| 10 | inset-block-start: 0; |
| 11 | inset-inline-end: 0; |
| 12 | |
| 13 | /* Inset shorthand */ |
| 14 | inset: 0; /* all sides */ |
| 15 | inset-block: 0; /* block-start + block-end */ |
| 16 | inset-inline: 0; /* inline-start + inline-end */ |
ℹ
info
Browser support for logical properties is excellent (98%+). Start using inline-size and block-size instead of width and height for future-proof layouts.