CSS direction Property

What You’ll Learn

The direction property sets the text flow of an element — left-to-right (ltr) or right-to-left (rtl). It is essential for multilingual websites and for creating a natural reading experience in languages like Arabic and Hebrew.

Introduction

The direction property in CSS is used to set the text direction of an element. This property is particularly useful for creating web pages that support languages written from right to left (RTL), such as Arabic and Hebrew. By controlling the direction of text, you can ensure that your website provides a proper and intuitive reading experience for users of different languages.

Definition and Usage

Apply direction to block containers whose inline content should flow in a specific direction. It affects how text, punctuation, and inline elements are ordered. It also influences logical properties such as margin-inline-start and padding-inline-end because “start” and “end” follow the current direction.

📝 Syntax

The syntax for the direction property is straightforward. It can be applied to any block-level element (and is inherited by descendants).

element {
  direction: ltr | rtl | initial | inherit;
}

Basic Example

p.rtl {
  direction: rtl;
}

Default Value

The default value of the direction property is ltr (left-to-right).

Syntax Rules

• Use ltr for languages that read left to right (English, Spanish, French, and many others).
• Use rtl for right-to-left scripts (Arabic, Hebrew, Persian, Urdu).
• The property is inherited — children follow the parent unless overridden.
• Pair direction changes with the correct lang attribute so browsers and assistive tech pick the right voice and rules.
• For mixed-direction content inside one line, you may also need unicode-bidi (advanced cases).

💎 Property Values

The direction property accepts keyword values that control inline text flow.

When to Use RTL Direction

Switch to direction: rtl when the primary content of a section is written in a right-to-left script:

Examples Gallery

In this example, we’ll change the text direction of a paragraph to right-to-left — plus patterns for RTL languages, page-level direction, and mixed layouts.

<style>
  p.rtl {
    direction: rtl;
  }
</style>

<h1>Paragraph with Custom Text Direction</h1>
<p>This paragraph is left-to-right by default.</p>
<p class="rtl">This paragraph is right-to-left.</p>

<style>
  .arabic {
    direction: rtl;
    font-family: "Segoe UI", Tahoma, sans-serif;
  }
</style>

<p class="arabic" lang="ar">
  مرحبًا بكم في موقعنا!
</p>

html {
  direction: rtl;
}

<style>
  .quote-en { direction: ltr; }
  .quote-ar { direction: rtl; }
</style>

<blockquote class="quote-en" lang="en">Welcome to our site.</blockquote>
<blockquote class="quote-ar" lang="ar">مرحبًا بكم في موقعنا.</blockquote>

♿ Accessibility

• Use dir in HTML — Pair CSS direction with dir="ltr" or dir="rtl" on the same element or ancestor.
• Set lang correctly — Screen readers and hyphenation depend on the language, not just visual direction.
• Do not flip content arbitrarily — Only use RTL when the actual language or user expectation requires it.
• Test keyboard and focus order — Direction changes can affect tab order and visual alignment of icons and controls.
• Prefer logical properties — Use margin-inline-start instead of hard-coded margin-left so spacing follows direction automatically.

💡 Best Practices