↔️ CSS direction: Control Text & Layout Direction

When designing websites for international audiences, text direction becomes critical. Some languages like English flow left-to-right (LTR), while others like Arabic or Hebrew flow right-to-left (RTL). The CSS direction property allows you to specify the reading and layout direction of text and elements on your webpage.

---

🧾 What is direction?

The direction property sets the base text direction of an element’s content and affects the layout of inline content, punctuation, and the placement of scrollbars in some browsers.

---

🧬 Syntax

selector {
  direction: ltr | rtl | inherit;
}

Values:

Value	Description
ltr	Left-to-right text direction (default)
rtl	Right-to-left text direction
inherit	Inherits the direction from the parent element

---

🎯 Examples

1. Left-to-right (English, default)

p {
  direction: ltr;
}

This ensures that text flows from left to right.

---

2. Right-to-left (Arabic, Hebrew)

body {
  direction: rtl;
}

This changes the entire page’s text flow to right-to-left, appropriate for languages like Arabic.

---

3. Mixed direction content

<div style="direction: rtl;">
  مرحبا بالعالم
  <span style="direction: ltr;">Hello World</span>
</div>

The outer div flows right-to-left, but the inner span switches back to left-to-right, useful for embedding mixed-language content.

---

🧠 How It Works

• The direction property affects text alignment, punctuation positioning, and cursor movement in input fields.
• Also influences table column order, scrollbar placement, and some UI element positions.
• Works best combined with the unicode-bidi property when handling complex bidirectional text.

---

🛠️ Tips & Best Practices

• Use direction when building sites in RTL languages for proper readability and user experience.
• Always pair with unicode-bidi: bidi-override or embed for fine control over bidirectional text rendering.
• Set direction on container elements to cascade styles correctly.
• Test thoroughly with mixed-language content to avoid layout glitches.

---

✅ Browser Support

Supported by all modern browsers and legacy versions:

• ✅ Chrome
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Internet Explorer 6+

---

🔚 Conclusion

The CSS direction property is a simple yet powerful way to ensure your website respects the natural reading order of different languages, making it accessible and user-friendly for diverse audiences worldwide.

---