dir

Set the text direction for content. Required for right-to-left languages like Arabic, Hebrew, Persian, and Urdu.

Overview

The dir attribute sets the text direction for an element's content. It is essential for right-to-left (RTL) languages including Arabic, Hebrew, Persian (Farsi), and Urdu. Without the correct dir value, text, punctuation, and layout will render incorrectly for these languages.

Set dir on the <html> element for the page's overall direction, and on inline elements when direction changes within the page.

Values

ValueBehavior
ltrLeft-to-right. The default for most languages. Text flows from left to right.
rtlRight-to-left. Text flows from right to left. Layout mirrors accordingly.
autoBrowser detects direction from the first strong directional character in the content. Ideal for user-generated content.

RTL Page

For a fully right-to-left page, set both dir="rtl" and the appropriate lang on <html>.

<html lang="ar" dir="rtl"> <head> <meta charset="utf-8" /> <title>صفحة عربية</title> </head> <body> <h1>مرحبا بالعالم</h1> <p>هذه الصفحة تُعرض من اليمين إلى اليسار.</p> </body> </html>

Mixed LTR and RTL Content

When a page mixes left-to-right and right-to-left content, use dir on individual elements to set the correct direction for each section.

<article dir="ltr"> <h2>International Greetings</h2> <p>In English, we say "Hello".</p> <p>In Arabic: <span dir="rtl" lang="ar">مرحبا</span></p> <p>In Hebrew: <span dir="rtl" lang="he">שלום</span></p> </article>

In English, we say "Hello".

In Arabic: مرحبا

In Hebrew: שלום

The bdi Element

The <bdi> element (Bidirectional Isolate) isolates a span of text from its surrounding content so the bidirectional algorithm treats it independently. This is essential when inserting user-generated content with unknown direction into a sentence.

<!-- Without bdi: usernames can break sentence order --> <p>User <bdi>إيمان</bdi> left a comment.</p> <p>User <bdi>Alice</bdi> left a comment.</p> <p>User <bdi>מירב</bdi> left a comment.</p>

User Alice left a comment.

User إيمان left a comment.

User מירב left a comment.

Why bdi Matters

Without <bdi>, an RTL name in an LTR sentence can cause the browser's bidirectional algorithm to reorder the surrounding text. The result is broken, unreadable sentences.

<!-- Without bdi, RTL names can reorder the sentence --> <p>User إيمان left 3 comments.</p> <!-- With bdi, the name is isolated from surrounding text --> <p>User <bdi>إيمان</bdi> left 3 comments.</p>

Rule of thumb: Always wrap user-provided names, labels, or any text of unknown direction in <bdi>.

The bdo Element

The <bdo> element (Bidirectional Override) forces a specific direction on its content, overriding the browser's bidirectional algorithm entirely. Use it sparingly — it is meant for cases where the algorithm produces the wrong result.

<!-- Force left-to-right rendering regardless of content --> <p><bdo dir="ltr">مرحبا</bdo></p> <!-- Force right-to-left rendering --> <p><bdo dir="rtl">Hello</bdo></p> <!-- Useful for displaying reversed text, reference numbers, etc. --> <p>Order number: <bdo dir="ltr">12345-أب</bdo></p>

dir="auto"

The auto value tells the browser to detect direction from the first strong directional character in the content. This is the best choice for user-generated content where you do not know the language in advance.

<!-- Let the browser detect direction from content --> <input type="text" dir="auto" placeholder="Type in any language..." /> <!-- Useful for user-generated content with unknown direction --> <div dir="auto">{{ userComment }}</div>

CSS direction vs the dir Attribute

CSS has a direction property, but the dir HTML attribute is almost always the correct choice.

ApproachAffects CSSAffects Copy/PasteAffects AccessibilitySemantic
dir="rtl" (attribute)YesYesYesYes
direction: rtl (CSS)YesNoNoNo
<style> /* Attribute vs property: prefer the attribute */ /* This only affects CSS rendering */ .rtl-css { direction: rtl; } /* This affects everything: CSS, copy-paste order, form submission, screen readers */ /* <div dir="rtl"> is always the better choice */ </style>

The dir attribute affects the browser's bidirectional algorithm, text selection order, copy-paste behavior, form submission, and assistive technology. The CSS property only changes visual rendering.

CSS Logical Properties

When building layouts that need to work in both LTR and RTL, use CSS logical properties instead of physical ones. VB uses logical properties throughout so that components work correctly regardless of text direction.

<style> /* These work correctly in both LTR and RTL */ .card { margin-inline-start: 1rem; /* not margin-left */ padding-inline-end: 1rem; /* not padding-right */ border-inline-start: 3px solid blue; /* not border-left */ text-align: start; /* not text-align: left */ } .icon-label { display: flex; gap: 0.5rem; /* flex-direction: row works in both directions automatically */ } /* Float to the "end" side of the text */ .pull-end { float: inline-end; /* not float: right */ } </style>
Physical (LTR-only)Logical (works in both)
margin-leftmargin-inline-start
margin-rightmargin-inline-end
padding-leftpadding-inline-start
padding-rightpadding-inline-end
border-leftborder-inline-start
text-align: lefttext-align: start
text-align: righttext-align: end
float: leftfloat: inline-start
float: rightfloat: inline-end
widthinline-size
heightblock-size

See Also

  • lang — declare the language of content
  • translate — control whether content should be translated
  • <bdi> — bidirectional isolate element
  • <bdo> — bidirectional override element