↔️ direction β€” Controlling Text Direction in CSS

🌐 What is direction?

The direction property controls the inline text direction inside an element β€” determining whether text flows left-to-right (LTR) or right-to-left (RTL). It is essential for multilingual interfaces, especially those supporting languages like Arabic, Hebrew, Farsi (RTL), or English, Tamil, Japanese, etc. (LTR).

>>β€œdirection controls the flow of text, punctuation, and inline layout β€” not the block layout.”

Note

βœ” Works in all browsers
βœ” Important for internationalization (i18n)
βœ” Affects inline content, text alignment, floats, and table layout

🎯 Why Use direction?

  • Support right-to-left languages (Arabic, Hebrew, Urdu)
  • Design bilingual or multilingual UI layouts
  • Control inline flow inside widgets and components
  • Fix rendering direction of numbers, punctuation, and icons
  • Ensure proper alignment of mixed LTR + RTL text

πŸ“Œ Syntax

direction Syntax

direction: ltr | rtl;

πŸ“ Values Explained

ValueDescription
ltr (left-to-right)Default for most languages (English, Spanish, Tamil, Hindi)
rtl (right-to-left)Used for RTL languages (Arabic, Hebrew, Urdu)

Note

πŸ’‘ direction does NOT rotate or flip text β†’ it controls text flow and inline ordering.

πŸ§ͺ Example 1 β€” Left-to-Right (Default)

LTR Example

.ltr-text {
  direction: ltr;
}

πŸ§ͺ Example 2 β€” Right-to-Left Text

RTL Example

.rtl-text {
  direction: rtl;
}

Common in Arabic UI layouts:

Arabic Example

<div class="rtl-text">Ψ§Ω„Ψ³Ω„Ψ§Ω… ΨΉΩ„ΩŠΩƒΩ…</div>

🧠 How direction Affects Inline Layout

FeatureEffect
Text flowLTR: left β†’ right
RTL: right β†’ left
Inline start & endlogical properties follow writing direction
text-align: start/endstart = left in LTR, right in RTL
float: inline-start/endDepends on direction
list-style-positionBullet switches to right side in RTL
tablesColumn ordering respects direction

Note

🧠 direction affects inline axes, while writing-mode affects block + inline axes rotation.

🎨 Example β€” Reversing a UI Component for RTL

Component RTL

.card {
  direction: rtl;
  text-align: start;
}

This makes text right-aligned automatically and flips inline items.

πŸ“± Example β€” Input Field with RTL Support

Input Example

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

🎯 direction + unicode-bidi (Advanced)

When dealing with mixed-direction content, use unicode-bidi to control how algorithmically text flows.

unicode-bidi Example

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

Forces all text to behave as RTL, even mixed content.

🧩 Logical Properties Work With direction

These properties change meaning depending on direction:

  • margin-inline-start
  • padding-inline-end
  • border-inline-start-color
  • inset-inline-end

Great for building UI that supports both LTR + RTL without rewriting CSS.

⚠️ Common Mistakes

  • ❌ Using direction to rotate text (use transform instead)
  • ❌ Expecting direction to affect block flow (use writing-mode)
  • ❌ Forgetting that direction flips inline alignment
  • ❌ Not testing UI in both LTR and RTL modes

Note

πŸ’‘ For app-wide RTL, set: html { direction: rtl; }

πŸ”₯ Summary

The direction property controls the inline text flow of an element, crucial for RTL language support and international UI layouts. When combined with writing-mode and logical properties, it creates powerful, fully responsive multilingual designs.

>>β€œdirection is the foundation of an RTL-aware front-end system.”

Learn more β†’MDN Docs πŸ“˜