Layout Without Compass Points
The world is becoming global. If your site needs to be translated to Arabic (right-to-left — RTL), regular left and right will become your headache.
Logical Equivalents:
Instead of physical directions (Top, Bottom, Left, Right), we use logical axes:
- Block: Page direction (vertical).
- Inline: Line direction (horizontal).
| Physical | Logical |
| :--- | :--- |
| top: 0 | inset-block-start: 0 |
| bottom: 0 | inset-block-end: 0 |
| left: 0 | inset-inline-start: 0 |
| right: 0 | inset-inline-end: 0 |
Why Is This Cool?
If you change text direction (direction: rtl), an element pressed to inset-inline-start will automatically jump left or right according to language logic.
Tip
Start using logical properties now. This is a sign of high skill level and care for accessibility (i18n).