CSS Logical Properties: Writing Mode-Aware Layouts
Replace physical properties (top, left, right, bottom) with logical ones for internationalized layouts.
- Replace physical properties (top, left, right, bottom) with logical ones for internationalized layouts.
- What Logical Properties Are.
- Physical vs Logical Mapping.
- Practical Migration.
- When to Switch.
What Logical Properties Are
CSS logical properties replace physical direction properties (top, right, bottom, left, width, height) with flow-relative equivalents that adapt to writing direction. margin-left becomes margin-inline-start. padding-top becomes padding-block-start. width becomes inline-size. Why? In right-to-left (RTL) languages like Arabic and Hebrew, ‘start’ is the right side, not the left. Logical properties automatically flip, so one stylesheet works for both LTR and RTL without overrides.
Physical vs Logical Mapping
The mapping is straightforward. Inline axis (horizontal in LTR): left → inline-start, right → inline-end, width → inline-size. Block axis (vertical in LTR): top → block-start, bottom → block-end, height → block-size. Shorthands exist: margin-inline: 0 16px; sets start and end margins. padding-block: 8px; sets both block start and end. Border, inset, and overflow properties all have logical equivalents. Use the CSS Minifier to optimize your updated stylesheets.
Practical Migration
Migrate incrementally: start with new components using logical properties exclusively. For existing code, replace physical properties in shared/base styles first (typography, spacing utilities, layout primitives), then component styles. Tools like stylelint-use-logical can flag physical properties in new code. The switch is mechanical — margin-left to margin-inline-start — and rarely affects visual output in LTR layouts.
When to Switch
Switch to logical properties when: you support or plan to support RTL languages, you’re building a design system or component library (future-proof), or you’re starting a new project (no legacy to migrate). Physical properties remain fine for: truly physical positioning (a shadow should always fall down regardless of text direction), legacy projects with no internationalization plans, and quick prototypes. Browser support is excellent: all modern browsers since 2020.