What are CSS Logical Properties and why use them for internationalization?
❓ Interview Prompt: Explain logical properties (inline/block) vs physical properties (left/right/top/bottom) for RTL support.
CSS Logical Properties use flow-relative directions instead of physical screen directions, enabling automatic Right-to-Left (RTL) language support:
Mapping:
| Physical | Logical (Horizontal) |
|---|---|
| margin-left | margin-inline-start |
| margin-right | margin-inline-end |
| padding-left/right | padding-inline |
| width | inline-size |
| height | block-size |
| top | inset-block-start |
Why It Matters:
In LTR languages (English), inline-start = left. In RTL languages (Arabic, Hebrew), inline-start automatically becomes right — no separate RTL stylesheet needed.
Code Implementation Example
/* ❌ Physical (breaks in RTL) */
.sidebar { margin-left: 24px; padding-right: 16px; }
/* ✅ Logical (works in LTR and RTL) */
.sidebar {
margin-inline-start: 24px;
padding-inline-end: 16px;
}
/* Shorthand for inline (horizontal) and block (vertical) */
.card {
padding-inline: 24px; /* left and right */
padding-block: 16px; /* top and bottom */
margin-inline: auto; /* center horizontally */
}Use logical properties (margin-inline, padding-block) instead of physical (margin-left) for automatic RTL support.