The dir Attribute
The dir Attribute
Section titled “The dir Attribute”The dir attribute specifies the text directionality of an element’s content. It’s essential for supporting right-to-left (RTL) languages like Arabic, Hebrew, and Persian, and can also handle bidirectional text containing mixed LTR and RTL content.
Syntax
Section titled “Syntax”<element dir="value">Content</element>Values
Section titled “Values”| Value | Description |
|---|---|
ltr | Left-to-right text direction (default for most languages) |
rtl | Right-to-left text direction (for Arabic, Hebrew, etc.) |
auto | Browser determines direction based on content |
Examples
Section titled “Examples”Basic RTL Text
Section titled “Basic RTL Text”Auto-Detection with Mixed Content
Section titled “Auto-Detection with Mixed Content”Bidirectional Text in Forms
Section titled “Bidirectional Text in Forms”How It Works
Section titled “How It Works”Inheritance
Section titled “Inheritance”The dir attribute is inherited by child elements. Setting it on the <html> element affects the entire document:
<html dir="rtl"> <!-- All content defaults to RTL --> <body> <p>This text is RTL</p> <p dir="ltr">This text overrides to LTR</p> </body></html>Auto-Detection Algorithm
Section titled “Auto-Detection Algorithm”When using dir="auto", the browser examines the content:
- Finds the first strong directional character
- Sets direction based on that character
- Ignores neutral characters (numbers, punctuation, spaces)
<!-- Detected as LTR (starts with 'H') --><p dir="auto">Hello مرحبا</p>
<!-- Detected as RTL (starts with Arabic) --><p dir="auto">مرحبا Hello</p>
<!-- Detected as LTR (ignores numbers/spaces) --><p dir="auto">123 Hello World</p>Best Practices
Section titled “Best Practices”1. Set Document-Level Direction
Section titled “1. Set Document-Level Direction”Always set the dir attribute on the <html> element for RTL languages:
<!DOCTYPE html><html lang="ar" dir="rtl"> <!-- Document content --></html>2. Use Auto for User-Generated Content
Section titled “2. Use Auto for User-Generated Content”When content direction is unpredictable (comments, social media posts), use dir="auto":
<div class="comment" dir="auto"> {{ userComment }}</div>3. Match lang and dir Attributes
Section titled “3. Match lang and dir Attributes”Ensure language and direction are consistent:
<!-- Correct --><p lang="ar" dir="rtl">مرحبا</p><p lang="he" dir="rtl">שלום</p><p lang="en" dir="ltr">Hello</p>
<!-- Inconsistent - avoid --><p lang="ar" dir="ltr">مرحبا</p>4. Consider CSS Logical Properties
Section titled “4. Consider CSS Logical Properties”Use CSS logical properties for better RTL support:
/* Physical properties - require separate RTL rules */.box { margin-left: 20px; padding-right: 10px;}
/* Logical properties - work automatically with dir */.box { margin-inline-start: 20px; padding-inline-end: 10px;}5. Test Mixed Content
Section titled “5. Test Mixed Content”Always test with bidirectional content:
<!-- Test both directions --><p dir="auto">English text with عربي words</p><p dir="auto">نص عربي with English words</p>Common Pitfalls
Section titled “Common Pitfalls”Accessibility Considerations
Section titled “Accessibility Considerations”Screen Readers
Section titled “Screen Readers”The dir attribute helps screen readers:
- Pronounce text correctly with proper intonation
- Announce direction changes to users
- Handle abbreviations and numbers appropriately
<!-- Screen reader knows to read RTL --><p lang="ar" dir="rtl"> قراءة النص بشكل صحيح</p>Keyboard Navigation
Section titled “Keyboard Navigation”Direction affects keyboard navigation:
- RTL mode: Arrow keys navigate right-to-left
- Text selection: Shift+Arrow selects in the correct direction
- Caret movement: Cursor moves according to text direction
Browser Support
Section titled “Browser Support”The dir attribute has universal browser support:
| Value | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
ltr | All | All | All | All |
rtl | All | All | All | All |
auto | 20+ | 10+ | 6+ | 79+ |
Related Attributes
Section titled “Related Attributes”lang- Specifies the language of content (should be used withdir)translate- Controls whether content should be translated
CSS Direction Property
Section titled “CSS Direction Property”The CSS direction property can also control text direction, but the dir attribute is preferred:
/* CSS approach - less semantic */.rtl-text { direction: rtl;}
/* HTML approach - recommended */<p dir="rtl">نص عربي</p>Why prefer HTML dir attribute:
- More semantic and accessible
- Works even when CSS is disabled
- Properly inherited by form elements
- Better screen reader support