direction

direction sets the base inline direction for text and affects layout such as table/grid column flow. It does not reverse the characters of a language indiscriminately. For meaningful content direction, prefer HTML’s dir attribute.

Observe CSS right-to-left layout

Text remains normal English, but start alignment follows the RTL base direction. The border-inline-start also moves to the right.

<p class="sample">English text in an RTL base-direction box.</p>

.sample {
  direction: rtl;
  text-align: start;
  padding: 1rem;
  border-inline-start: 5px solid #2563eb;
  background: #eff6ff;
}

Put meaningful direction in HTML

Dir:rtl belongs in the document and remains meaningful if CSS is unavailable. Bdi isolates an unknown-direction identifier within the sentence.

<p lang="ar" dir="rtl">مرحبًا <bdi dir="auto">user-42</bdi></p>

p {
  padding: 1rem;
  border: 1px solid #94a3b8;
}

Values and defaults

The initial value is ltr, and the property is inherited. Rtl establishes right-to-left base direction. CSS direction does not offer the HTML dir:auto behavior. Direction and unicode-bidi are exceptions to the all shorthand reset.

Common mistakes

Text-align:right is alignment, not meaningful direction. Applying direction to an inline span alone is not a dependable way to create a bidi embedding; use appropriate HTML dir/bdi/bdo semantics. CSS inheritance follows the document tree, so direction on a table column does not inherit into cells that are children of rows. Do not use RTL merely to reverse a visual interface order.

Learn bdi, bdo, and text-align.

Sources and browser support

MDN: direction describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.