Rethinking Layout: Why CSS Logical Properties Matter for Global Websites

July 4, 2025

I have built my fair share of internationalized websites. For years, I followed the same pattern: write CSS in physical directions (left, right, top, bottom), then override everything for RTL languages with messy “rtl” selectors. It worked, but it always felt like there had to be a better way. CSS Logical Properties changed that for me entirely.

The Problem with Physical Properties

Consider this common pattern:

.card {
  margin-left: 20px;
  padding-right: 15px;
  border-left: 2px solid blue;
  text-align: left;
}

Simple enough for English. But when you need to support Arabic or Hebrew, you’re stuck with:

[dir="rtl"] .card {
  margin-left: 0;
  margin-right: 20px;
  padding-right: 0;
  padding-left: 15px;
  border-left: none;
  border-right: 2px solid blue;
  text-align: right;
}

This duplication leads to maintenance nightmares and bloated stylesheets.

Enter Logical Properties

Logical properties describe the layout relative to text flow rather than dimensions and directions. Instead of left and right, we think in terms of start and end.

Here’s the same card using logical properties:

.card {
  margin-inline-start: 20px;
  padding-inline-end: 15px;
  border-inline-start: 2px solid blue;
  text-align: start;
}

No RTL overrides needed. The browser handles the direction automatically based on the dir attribute or writing-mode.

Key Logical Property Concepts

Block vs Inline axes:

Block axis: The direction text blocks stack (typically vertical)
Inline axis: The direction text flows within a line (horizontal in Latin scripts)

Start vs End:

start: Where text begins (left in LTR, right in RTL)
end: Where text ends (right in LTR, left in RTL)

Common Mappings

Here are the most useful transformations:

/* Margins & Padding */
margin-left → margin-inline-start
margin-right → margin-inline-end
margin-top → margin-block-start
margin-bottom → margin-block-end

/* Borders */
border-left → border-inline-start
border-right → border-inline-end

/* Positioning */
left → inset-inline-start
right → inset-inline-end
top → inset-block-start
bottom → inset-block-end

/* Dimensions */
width → inline-size
height → block-size

Real-World Example: Navigation Bar

Before:


.nav-item {
  float: left;
  margin-right: 16px;
  border-right: 1px solid #ccc;
}

[dir="rtl"] .nav-item {
  float: right;
  margin-right: 0;
  margin-left: 16px;
  border-right: none;
  border-left: 1px solid #ccc;
}

After:

.nav-item {
  float: inline-start;
  margin-inline-end: 16px;
  border-inline-end: 1px solid #ccc;
}

The savings compound across your codebase.

Browser Support & Progressive Enhancement

Browser support is excellent (95%+ globally). For older browsers, you can use progressive enhancement or use PostCSS with postcss-logical to generate fallbacks automatically.:

.element {
  margin-left: 20px; /* Fallback */
  margin-inline-start: 20px; /* Modern browsers */
}

When to Adopt This Strategy

Start using logical properties if:

You’re building new projects
You support or plan to support RTL languages
You want cleaner, more maintainable CSS

You might wait if:

You’re maintaining legacy codebases with limited resources
Your browser support requirements include IE11. If this is the case, I’m sorry and good luck.

Practical Tips for Adoption

Start with new features – Don’t refactor everything at once
Update your linter – Configure stylelint to prefer logical properties
Educate your team – The mental model shift takes practice
Use shortcuts – margin-inline sets both start and end
Test early – Use browser DevTools to toggle dir=”rtl”

The Bigger Picture

Logical properties aren’t just about RTL support. They prepare your codebase for:

Vertical writing modes (Chinese, Japanese, Mongolian)
Mixed directionality content
Future layout paradigms

As Frontend Engineers, our job isn’t just writing code that works today, it’s building systems that adapt to tomorrow’s requirements with minimal friction.

CSS Logical Properties represent the platform evolving to meet the web’s global nature. They’re not a trend; they’re the foundation for truly internationalized design systems.