Why Logical Properties: Internationalization
Understand why physical CSS properties break RTL layouts and how logical properties fix this.
The Problem with Physical Properties
Traditional CSS uses physical directions: top, right, bottom, left. These are fine for left-to-right (LTR) languages like English, but break for right-to-left (RTL) languages like Arabic and Hebrew, or vertical writing systems like traditional Japanese.
Physical vs Logical
Compare:
- Physical: top, right, bottom, left — fixed to the screen
- Logical: block-start, block-end, inline-start, inline-end — relative to writing mode
All lessons in this course
- Why Logical Properties: Internationalization
- Block and Inline Directions
- Logical Margin Padding and Border
- Logical Properties in RTL Layouts