patternjavascriptMajor

RTL Layout Support: CSS Logical Properties and dir Attribute

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

RTLright to leftcss logical propertiesdir attributearabic layoutbidirectional text

Problem

An LTR-designed layout breaks visually for Arabic, Hebrew, and other RTL languages because margins, paddings, and flex directions are hardcoded as left/right.

Solution

Use CSS logical properties (margin-inline-start instead of margin-left) and set dir="rtl" on the root element. For Tailwind, use the rtl: variant.

/* Physical — breaks RTL */
.card { margin-left: 16px; padding-right: 24px; border-left: 2px solid; }

/* Logical — works in both directions */
.card { margin-inline-start: 16px; padding-inline-end: 24px; border-inline-start: 2px solid; }

<html lang="ar" dir="rtl">

useEffect(() => {
  document.documentElement.dir = locale === 'ar' || locale === 'he' ? 'rtl' : 'ltr';
}, [locale]);

Why

The dir attribute causes the browser to mirror flex row direction, text alignment, and scroll positions. CSS logical properties map to physical left/right based on the current writing mode automatically.

Gotchas

Icons and chevrons indicating direction (prev/next) must be mirrored manually for RTL; CSS logical properties do not flip images.
Absolute positioning (left, right) is not affected by dir — replace with inset-inline-start/end.
Test with real RTL content; Latin placeholder text in RTL mode can look correct but mask real layout bugs.
BiDi (bidirectional) text requires unicode-bidi and direction properties for correct inline rendering.

Revisions (0)

No revisions yet.