Logical Properties Playground - Online RTL & Writing Mode

CSS Logical Properties are a set of CSS properties that define layout, sizing, spacing, and borders based on the writing mode and text direction rather than physical directions (top, right, bottom, left). They use terms like block-start, inline-end, block-size, and inline-size. This allows layouts to automatically adapt when switching between LTR/RTL languages or vertical writing modes (like Japanese or Mongolian), without rewriting CSS rules.

Using logical properties makes your CSS direction-agnostic and writing-mode-aware. The key benefits include: (1) Automatic RTL support—your layout flips correctly for Arabic, Hebrew, Persian, and Urdu without extra overrides. (2) Vertical writing mode compatibility for East Asian languages. (3) Cleaner, more maintainable code—no need for [dir="rtl"] overrides scattered throughout your stylesheets. (4) Future-proofing—the web is increasingly multilingual, and logical properties are the modern standard for internationalized layouts.

Most physical properties have logical counterparts:
Margin/Padding: margin-block-start, padding-inline-end, etc.
Border: border-block-start-width, border-inline-start-color, etc.
Sizing: inline-size (replaces width), block-size (replaces height), min-inline-size, max-block-size.
Positioning: inset-block-start, inset-inline-end (replace top/right/bottom/left).
Overflow: overflow-inline, overflow-block.
Text alignment: text-align: start / text-align: end.

The writing-mode property defines the block axis and inline axis directions. In horizontal-tb (default), the block axis runs top-to-bottom and the inline axis runs left-to-right. In vertical-rl, the block axis runs right-to-left and the inline axis runs top-to-bottom. Logical properties reference these axes, so margin-block-start affects the top in horizontal-tb but the right side in vertical-rl. Use the playground above to switch modes and see the mapping update in real time!

direction only flips the inline axis (left ↔ right), swapping inline-start and inline-end. It does NOT affect the block axis. writing-mode fundamentally changes both axes—rotating the entire flow by 90°. In vertical-rl, the block axis becomes horizontal (right-to-left) and the inline axis becomes vertical (top-to-bottom). They can be combined: a vertical-rl writing mode with direction: rtl further flips the inline direction.

Yes! As of 2024, CSS Logical Properties enjoy excellent browser support across all modern browsers including Chrome (69+), Firefox (41+), Safari (15+), and Edge (79+). They cover over 96% of global users. Some older properties like inset-* and overflow-* logical variants have slightly later support (Safari 15+), but core margin/padding/border/size logical properties are universally supported. You can safely use them in production, potentially with physical-property fallbacks for very old browsers.