CSS Text Direction

What is CSS Text Direction?

CSS text direction properties control how text flows within a document — left-to-right, right-to-left, or vertically — and how the browser handles text from scripts with mixed directionality. These properties are critical for Arabic, Hebrew, Persian, and Urdu content (right-to-left), as well as traditional Chinese and Japanese typesetting (vertical text).

The direction Property

The direction property sets the base text direction for an element's content:

/* Left-to-right (default for most Latin, CJK text) */
.english { direction: ltr; }

/* Right-to-left (Arabic, Hebrew, Persian) */
.arabic { direction: rtl; }

The direction property only affects block-level elements and inline elements that have a defined display context. For inline text embedded within paragraphs, the Unicode Bidirectional Algorithm (UBA) often handles direction automatically based on the characters present, but direction provides an explicit override.

The HTML dir attribute (<p dir="rtl">) is generally preferred over CSS direction for semantic reasons, as it communicates directionality to assistive technologies and search engines.

The writing-mode Property

writing-mode determines the direction in which lines of text stack:

/* Default: lines stack top to bottom, text flows left or right */
.normal { writing-mode: horizontal-tb; }

/* Vertical: lines stack right to left, text flows top to bottom */
.japanese-vertical { writing-mode: vertical-rl; }

/* Vertical: lines stack left to right, text flows top to bottom */
.mongolian { writing-mode: vertical-lr; }

Traditional Japanese and Chinese books use writing-mode: vertical-rl, where the first column is on the right side of the page and subsequent columns flow leftward. The CSS text-orientation property works alongside writing-mode to control how individual glyphs are rotated within vertical lines.

unicode-bidi — Fine-Grained Bidirectional Control

The unicode-bidi property gives developers fine-grained control over how the Unicode Bidirectional Algorithm applies to an element:

/* Isolate: treat the element's content as an isolated bidi sequence */
.inline-rtl { unicode-bidi: isolate; direction: rtl; }

/* Override: force all characters to display in the declared direction */
.force-ltr { unicode-bidi: bidi-override; direction: ltr; }

/* Embed: add a bidi embedding level */
.embed { unicode-bidi: embed; direction: rtl; }

isolate is the safest modern value — it creates a new bidi context that does not affect the surrounding text. It is the CSS equivalent of the HTML dir attribute with the <bdi> element.

Logical Properties — Layout Independent of Direction

Traditional CSS physical properties (margin-left, padding-right, border-top) break down when the same stylesheet must serve both LTR and RTL layouts. CSS Logical Properties replace physical references with flow-relative ones:

/* Physical (breaks in RTL) */
.button { margin-left: 8px; border-left: 2px solid; }

/* Logical (works in both LTR and RTL) */
.button {
  margin-inline-start: 8px;
  border-inline-start: 2px solid;
}

Quick Facts