CSS Logical Properties: Writing Modes, RTL, and Direction-Aware Layouts

Introduction

In modern web design, layouts must seamlessly adapt to different languages and writing modes — CSS Logical Properties offer a future-proof way to style elements that respect writing direction, text flow, and orientation.

Whether it's right-to-left (RTL) languages like Arabic and Hebrew, or vertical writing in Japanese, logical properties let you create one stylesheet that works everywhere.

Instead of tying layout to fixed physical directions (left, right, top, bottom), they use flow-relative directions: start, end, inline, and block.

With physical properties:

/* Physical properties */
margin-left: 1rem; /* Always on the left side */

In an RTL layout, margin-left still applies to the left side — which may no longer be the "start" of the text.

With logical properties:

/* Logical equivalent */
margin-inline-start: 1rem; /* Adapts to start side based on writing mode */

If the document switches to RTL, margin-inline-start automatically applies to the right — no extra styles needed.

This ensures your layout is writing mode aware.

👉 Try this hands-on in the interactive playground below — flip Direction to rtl and watch the Physical card's margin stay on the left while the Logical card's follows the text.

Benefits of Logical Properties

1. Internationalization Ready – Works for RTL and vertical writing without needing separate stylesheets.
2. Consistent Layouts – Automatically adjusts for writing mode changes, keeping design predictable.
3. Cleaner Code – Reduces redundancy and removes the need for duplicated directional styles.
4. Accessibility Friendly – Plays nicely with screen readers in RTL and vertical text contexts.
5. Performance Friendly – Fewer overrides and media queries improve maintainability.
6. Future Proof – Ready for expanded language and writing system support as browsers evolve.

When to Use Logical vs. Physical

Logical properties shine when your layout needs to adapt across different writing modes, such as left-to-right (English), right-to-left (Arabic/Hebrew), or vertical scripts (Japanese). They future-proof your styles so you don't have to rewrite CSS when switching directions or supporting multilingual content.

That said, physical properties aren't "wrong." If your project is a small, LTR-only site (like a personal blog or an internal tool with no internationalization needs), using margin-left or padding-top may be perfectly fine and even easier for quick prototyping.

Think of it this way:

• Use logical properties when accessibility, scalability, and localization are priorities.
• Use physical properties when the content direction is fixed and simplicity matters.

Understanding Inline vs Block Axes

Inline axis — the direction in which text flows.

Block axis — the direction perpendicular to the inline axis, where blocks (paragraphs, divs) stack.

Key idea: Logical properties use inline / block combined with start / end:

• inline-start – leading edge of the inline axis (left in LTR, right in RTL, top in some vertical modes).
• inline-end – trailing edge of the inline axis.
• block-start – leading edge of the block axis (top in horizontal writing).
• block-end – trailing edge of the block axis.

horizontal-tb (LTR – e.g., English)

horizontal-tb (RTL – e.g., Arabic, Hebrew)

vertical-rl (e.g., Traditional Mongolian)

vertical-lr (e.g., some East Asian scripts)

Quick Reference: Logical vs Physical Mappings

Inline vs. Block in Action

Example 1 — Inline / Block sizing

.box {
  inline-size: 40ch;    /* horizontal-tb: width; vertical-rl/lr: height */
  block-size: 10rem;    /* horizontal-tb: height; vertical-rl/lr: width */
  padding-inline: 1rem; /* horizontal-tb: left & right; vertical: top & bottom */
  padding-block: 0.5rem;/* horizontal-tb: top & bottom; vertical: right & left */
}

Example 2 — Direction-aware margins

.card {
  margin-inline-start: 1rem; /* horizontal LTR: left; horizontal RTL: right; vertical: top */
  margin-block-start: 2rem;  /* horizontal: top; vertical-rl: right; vertical-lr: left */
}

Example 3 — Switching writing modes

/* Default: horizontal LTR */
.article {
  writing-mode: horizontal-tb;
  direction: ltr;
}

/* Vertical (e.g., Japanese-style) */
.vertical {
  writing-mode: vertical-rl;
  /* Set `direction` only if your content is RTL; otherwise omit. */
}

👉 Try this hands-on in the interactive playground below — the Writing mode control cycles through exactly these values.

Categories of Logical Properties

Here's a categorized list of logical properties with their physical equivalents — use this as your quick lookup table. Most of these reached Baseline years ago and are safe to use everywhere; a few are newer or unevenly implemented, and those call that out inline.

Dimension

Margin

Padding

Borders

Border Radius

Positioning / Offsets

Resizing

Containment

Floats & Clears

Text Alignment

Tables

Scroll Margin

Scroll Padding

Overflow

Overscroll Behavior

Scroll Snap

Interactive Example

Reading the mappings above is one thing — watching them hold up under a direction change is another. The playground below renders two cards side by side: one styled entirely with physical properties (margin-left, padding-left, border-left, text-align: left), the other with their logical equivalents (margin-inline-start, padding-inline-start, border-inline-start, text-align: start).

Flip Direction between ltr and rtl, then cycle Writing mode through horizontal-tb, vertical-rl, and vertical-lr. The physical card stays nailed to the left no matter what you choose — the logical card tracks the start edge and repositions itself to match.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Logical Properties Playground</title>
  </head>
  <body>
    <main class="playground">
      <header class="playground-header">
        <h1>Logical vs Physical Properties</h1>
        <p>Flip the direction and writing mode — watch which card holds up.</p>
      </header>

      <section class="demo-area" aria-label="Logical vs physical property preview">
        <div id="stage" class="stage">
          <div class="card card--physical">
            <span class="card-badge card-badge--physical">Physical</span>
            <code class="card-code">
              margin-left · padding-left · border-left · text-align: left
            </code>
            <p class="card-text">Nailed to the left, no matter what you pick below.</p>
          </div>

          <div class="card card--logical">
            <span class="card-badge card-badge--logical">Logical</span>
            <code class="card-code">
              margin-inline-start · padding-inline-start · border-inline-start · text-align: start
            </code>
            <p class="card-text">Follows the start edge — flips with direction and writing mode.</p>
          </div>
        </div>
      </section>

      <output id="props-output" class="readout" aria-live="polite"></output>

      <fieldset class="control-group">
        <legend>Configuration</legend>
        <div class="fields-grid">
          <div class="field field--full">
            <span class="field-label" id="direction-label">Direction</span>
            <div class="segmented-control" role="radiogroup" aria-labelledby="direction-label">
              <label class="segment">
                <input type="radio" name="direction" value="ltr" checked>
                <span>LTR</span>
              </label>
              <label class="segment">
                <input type="radio" name="direction" value="rtl">
                <span>RTL</span>
              </label>
            </div>
          </div>

          <div class="field field--full">
            <span class="field-label" id="writing-mode-label">Writing mode</span>
            <div class="segmented-control" role="radiogroup" aria-labelledby="writing-mode-label">
              <label class="segment">
                <input type="radio" name="writing-mode" value="horizontal-tb" checked>
                <span>horizontal-tb</span>
              </label>
              <label class="segment">
                <input type="radio" name="writing-mode" value="vertical-rl">
                <span>vertical-rl</span>
              </label>
              <label class="segment">
                <input type="radio" name="writing-mode" value="vertical-lr">
                <span>vertical-lr</span>
              </label>
            </div>
          </div>
        </div>
      </fieldset>
    </main>

    <script src="./index.js"></script>
  </body>
</html>

Best Practices

• Start with fallbacks — Use physical as fallbacks, then layer logical — don't mix both unintentionally
• Test different flows — Validate layouts in both horizontal-tb and vertical-rl writing modes to catch axis-mapping issues.
• Prefer explicit properties — Use individual logical properties (margin-inline-start) instead of shorthands for broader browser support.
• Handle RTL layouts — Apply direction: rtl for languages like Arabic and Hebrew to switch inline flow automatically.
• Control writing flow — Use writing-mode for vertical text layouts, keeping in mind that block and inline axes swap roles.
• Use alignment shortcuts — Rely on text-align: start / end to adapt automatically in LTR and RTL contexts.
• Adopt logical positioning — Replace physical offsets (top, right, bottom, left) with inset-block / inset-inline for flexibility.
• Check browser support — Always confirm on MDN's compatibility tables before using less common logical properties.

Fallbacks for Older Browsers

If you need to support older browsers that don't recognize logical properties, you can define physical property fallbacks first, followed by your logical properties. This ensures that browsers without logical property support (e.g., Internet Explorer) still display layouts correctly.

Without Logical Properties (LTR & RTL handled separately):

/* LTR */
.card {
  margin-left: 1rem;
  padding-left: 1rem;
  text-align: left;
}

/* RTL */
html[dir="rtl"] .card {
  margin-right: 1rem;
  padding-right: 1rem;
  text-align: right;
}

With Logical Properties (Single stylesheet):

.card {
  margin-inline-start: 1rem;
  padding-inline-start: 1rem;
  text-align: start;
}

Hybrid Approach (Fallback + Logical):

.card {
  /* Physical property fallbacks */
  margin-left: 1rem;
  padding-left: 1rem;
  text-align: left;

  /* Logical properties override */
  margin-inline-start: 1rem;
  padding-inline-start: 1rem;
  text-align: start;
}

@supports-Based Approach (Clean separation)

/* Physical property fallbacks */
.card {
  margin-left: 1rem;
  padding-left: 1rem;
  text-align: left;
}

/* Apply logical properties only if supported */
@supports (margin-inline-start: 1rem) {
  .card {
    margin-inline-start: 1rem;
    padding-inline-start: 1rem;
    text-align: start;
  }
}

👉 The interactive playground above renders this exact margin / padding / text-align set side by side — Physical vs. Logical — so you can see live what these fallbacks are working around.

Conclusion

CSS Logical Properties aren't just about cleaner code — they represent the future of responsive, internationalized web design. By thinking in terms of flow-relative directions instead of fixed sides, you create layouts that are naturally direction-aware, resilient, and easier to maintain across languages and scripts.

Start small: replace margin-left with margin-inline-start, or width with inline-size. Over time, your CSS will become not only simpler, but also future-proof and truly international-ready.