CSS direction Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The direction CSS property establishes the base inline directionality for text and inline-level content within an element. It is the starting point for the Unicode Bidirectional Algorithm that resolves how runs of characters with different directional properties (for example, Arabic or Hebrew mixed with Latin) are ordered and displayed. When you set this property on an element, you change how neutral characters and weak directionality characters are resolved, which affects the visual order of words, punctuation placement at line ends, and the interpretation of embedding/override directions when used together with unicode-bidi.

Beyond text ordering, direction affects layout decisions that depend on the notion of “start” and “end” rather than the physical left and right. Many user-agent behaviors and higher-level CSS logical mappings use the base inline direction to decide which side is considered the inline start (for example, what “start” maps to when resolving alignment or logical margin/padding). This is why aligning inline content, resolving start/end values, and interpreting shorthand alignment can produce different visual results in an RTL context versus an LTR one; it interacts closely with alignment-related controls such as text-align and with writing orientation when combined with writing-mode.

Because direction is inherited, setting it on a root or container element provides a consistent base for its descendants, which is often desirable when building UIs for right-to-left languages. It also influences other runtime behaviors: caret movement and text selection respect the inline progression created by the base direction; some glyphs are mirrored by user agents when direction changes; and logical layout approaches (using start/end logical properties instead of physical left/right) are important to make components adapt correctly. In practice, prefer applying a single coherent base direction for document regions, use unicode-bidi only when you need fine-grained overrides, and test with mixed-script content to ensure punctuation, embedding, and selection behave as expected.

Definition

Initial value: ltr
Applies to: All elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.direction

Interactive Demo

direction: ltr;

direction: rtl;

One

Two

Three

Four

Syntax

direction: ltr | rtl

Values

ltrThe direction of text and other elements go from left to right.
rtlThe direction of text and other elements go from right to left.
inherit

Example

HTML

<body>

  <main>

    <h1>CSS direction property  -  examples</h1>



    <section class='example ltr'>

      <h2>Left-to-Right (LTR)</h2>

      <p>This section uses direction: ltr. English text and list markers appear on the left.</p>

      <ol class='demo-list'>

        <li>First item</li>

        <li>Second item</li>

        <li>Third item</li>

      </ol>

    </section>



    <section class='example rtl'>

      <h2>Right-to-Left (RTL)</h2>

      <p>هذا القسم يستخدم direction: rtl. Arabic text and list markers appear on the right.</p>

      <ol class='demo-list'>

        <li>عنصر أول</li>

        <li>عنصر ثاني</li>

        <li>عنصر ثالث</li>

      </ol>

    </section>

  </main>

</body>

CSS

/* Basic page styles */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  line-height: 1.4;
  background: #f7f7fb;
  color: #111827;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

.example {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Apply the direction property */
.example.ltr {
  direction: ltr;
  text-align: left;
}

.example.rtl {
  direction: rtl;
  text-align: right;
}

/* Style list to show marker placement */
.demo-list {
  margin: 12px 0 0 0;
  padding: 0 16px;
}

.demo-list li {
  margin: 8px 0;
  padding: 8px;
  background: #f1f5f9;
  border-radius: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS direction property. Hover over a browser icon to see the version that first introduced support for this CSS property.