CSS direction Property

CSS direction Property

The direction property in CSS sets the text direction for an element, affecting text flow and inline content. It is commonly used for languages that are written from right to left (RTL), such as Arabic and Hebrew.

1. Syntax

selector {
  direction: ltr | rtl;
}

Value	Description
ltr (default)	Left-to-right text direction (e.g., English, Spanish).
rtl	Right-to-left text direction (e.g., Arabic, Hebrew).

✅ The direction property only affects inline content. For full layout changes, combine it with unicode-bidi.

2. Example – Left-to-Right (direction: ltr;)

.text-ltr {
  direction: ltr;
}

<p class="text-ltr">This text flows from left to right.</p>

✅ Default text direction for English and Latin scripts.

3. Example – Right-to-Left (direction: rtl;)

.text-rtl {
  direction: rtl;
}

<p class="text-rtl">هذا النص يكتب من اليمين إلى اليسار</p>

✅ Text starts from the right (useful for Arabic & Hebrew).

4. Example – direction with Text Alignment

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

<p class="right-align">Right-to-left text aligned to the right.</p>

✅ Ensures proper alignment for RTL content.

5. Using direction with unicode-bidi for Full Layout Control

.rtl-container {
  direction: rtl;
  unicode-bidi: bidi-override;
}

<div class="rtl-container">
  <p>This text will fully switch to RTL mode.</p>
</div>

✅ The entire block's layout adapts to RTL.

6. Best Practices

✔ Use direction: rtl; for RTL languages like Arabic or Hebrew.
✔ Combine with unicode-bidi: bidi-override; proper bidirectional text handling.
✔ Be mindful of UI mirroring when designing for RTL users.