CSS Logical Properties for International Layouts
Lesson 48 • Advanced Track
What You'll Learn
- Replace physical properties (left/right/top/bottom) with logical ones (inline/block)
- Understand block vs inline axis in different writing modes
- Build layouts that work in LTR, RTL, and vertical writing modes without code changes
- Use logical shorthands: margin-inline, padding-block, border-inline, inset
- Apply logical sizing: inline-size, block-size, max-inline-size
- Migrate existing CSS from physical to logical properties incrementally
💡 Real-World Analogy
Physical properties are like giving directions using "left" and "right" — they break if someone faces the other way. Logical properties are like saying "start" and "end" — they adapt to any orientation, just like "the door at the start of the hallway" works regardless of which end you enter from.
Understanding Logical Properties
CSS logical properties replace physical directions (left, right, top, bottom) with flow-relative directions. Instead of "left" and "right", you use inline-start and inline-end (along the reading direction). Instead of "top" and "bottom", you use block-start and block-end (perpendicular to reading).
In English (LTR), inline-start = left, inline-end = right. In Arabic/Hebrew (RTL), they flip automatically: inline-start = right. In vertical Japanese, the entire axis rotates. The same CSS works everywhere without any changes — this is why logical properties are essential for internationalised (i18n) applications.
Modern CSS frameworks like Tailwind CSS now default to logical properties (e.g., ms-4 for margin-inline-start, ps-4 for padding-inline-start). Adopting logical properties isn't just about i18n — it's about writing future-proof CSS that aligns with how the web platform is evolving.
1. Logical vs Physical Properties
See how border-inline-start automatically flips when the direction changes from LTR to RTL. The same CSS works in both directions — no separate stylesheets or overrides needed.
Logical vs Physical Properties
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h2 { color: #1565C0; }
.card { background: white; border: 1px solid #ddd; border-radius: 8px; padding-block: 16px; padding-inline: 20px; margin-block-end: 16px; border-inline-start: 4px solid #1976D2; }
.card h3 { margin-block-start: 0; }
.card p { color: #555; line-height: 1.7; }
table { width: 100%; border-collapse: collapse; margin-block: 16px; }
th, td { padding: 10px 14px; border: 1px solid #ddd;
...2. Logical Sizing & Positioning
Beyond margin and padding, logical properties extend to sizing (inline-size instead of width) and positioning (inset-inline instead of left/right). These become critical when supporting vertical writing modes.
Logical Sizing Properties
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h1 { color: #1565C0; }
h2 { margin-top: 24px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 600px) { .demo-grid { grid-template-columns: 1fr; } }
.box { padding: 20px; border-radius: 8px; border: 2px solid #e0e0e0; }
.box h3 { margin-top: 0; font-size: 0.9rem; color: #666; text-transform: uppercase; }
code { background: #f0f0f0; padding:
...3. Writing Modes in Action
Three panels showing the same CSS rendering in LTR, RTL, and vertical writing mode. The border on inline-start automatically adjusts to the correct edge in each mode.
Writing Modes Comparison
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h1 { color: #1565C0; }
h2 { margin-top: 24px; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
@media (max-width: 700px) { .modes { grid-template-columns: 1fr; } }
.mode-demo { border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; min-height: 200px; }
.mode-demo h3 { margin-top: 0; font-size: 0.85rem; color: #999; text-transform: uppercase; }
.mode-
...4. Shorthands & Migration Guide
Logical properties have convenient shorthands: margin-inline sets both inline-start and inline-end at once. This reference shows all shorthands and a before/after code comparison for migrating from physical to logical properties.
Logical Shorthands & Migration
<!DOCTYPE html>
<html><head><style>
body { font-family: system-ui, sans-serif; padding: 24px; }
h1 { color: #1565C0; }
h2 { margin-top: 24px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { padding: 10px 14px; border: 1px solid #ddd; text-align: left; }
th { background: #f5f5f5; }
td:first-child { font-family: monospace; font-size: 0.85rem; color: #1565C0; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; }
.demo { margin: 24px 0; padding: 24px; bor
...When to Use Logical Properties
- Internationalised apps: Any app that supports or might support RTL languages (Arabic, Hebrew, Farsi, Urdu).
- Component libraries: Reusable components should use logical properties so they work in any context.
- New projects: Default to logical properties from the start. It's the future of CSS and costs nothing extra.
- Vertical text: Japanese, Chinese, and Korean sites that use vertical writing modes benefit enormously.
Common Mistakes
- Mixing physical and logical — Be consistent. Don't use
margin-leftalongsidepadding-inlinein the same component. - Forgetting text-align — Use
text-align: startinstead oftext-align: left. Same forfloat. - Ignoring inset — For positioned elements, use
inset-inline-startinstead ofleft. - Not updating border-radius — Logical border-radius uses
border-start-start-radius(block-start inline-start corner). - Thinking it's only for RTL — Logical properties also fix vertical writing modes, which physical properties can't handle.
- Big-bang migration — Don't rewrite everything at once. Migrate component by component, starting with new code.
🎉 Lesson Complete
- ✅ Logical properties adapt to any writing direction automatically
- ✅
inline= reading direction,block= perpendicular to reading - ✅ Shorthands:
margin-inline,padding-block,border-inline,inset - ✅ Sizing:
inline-size(width),block-size(height) - ✅ Use
text-align: startinstead oftext-align: left - ✅ Essential for internationalised (i18n) and multilingual applications
- ✅ Modern frameworks default to logical properties — adopt them for new code
- ✅ Next lesson: Building responsive pages without frameworks
Sign up for free to track which lessons you've completed and get learning reminders.