HTML dir Attribute
The dir attribute is a part of Global Attributes and specifies the text direction of an element’s content. Read and find out on what elements it can be used.
The HTML dir attribute specifies the base text direction of an element's content. It is essential for displaying HTML correctly in right-to-left (RTL) scripts such as Arabic, Hebrew, Persian, and Urdu. Hundreds of millions of people read languages written in these scripts, so setting the direction correctly is a core part of internationalization.
dir is a Global Attribute, so you can use it on any HTML element. The value an element uses is inherited from its nearest ancestor that has dir set, falling back to ltr if none does.
Values
The dir attribute can have three values:
ltr— left-to-right text direction (the default for most browsers). Used for Latin, Cyrillic, Greek, CJK, and most other scripts.rtl— right-to-left text direction. Used for Arabic, Hebrew, and similar scripts.auto— lets the browser decide based on the content, using the first strong directional character heuristic (see the warning below).
Syntax
<tag dir="ltr | rtl | auto">content</tag>Setting the document direction with dir on <html>
The most common and important use of dir is on the <html> element. This sets the base direction for the whole page, which every element then inherits. For an Arabic or Hebrew page you should always pair dir="rtl" with the matching lang attribute:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Because dir="rtl" is on <html>, the heading, paragraph, list bullets, scrollbar position, and default text alignment all flow from right to left without any extra markup.
Example: visible RTL effect
The original example put dir="rtl" on English text, where the effect is barely noticeable. The direction is only obvious with real RTL-script text or with mixed punctuation. Compare these paragraphs:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>In the rtl paragraph the Hebrew runs right-to-left and the trailing text and punctuation are reordered accordingly. In the auto paragraph the browser detects the first strong character (Hebrew) and chooses rtl automatically.
When to set ltr explicitly
Setting dir="ltr" on a child element is useful to override an inherited rtl direction. For example, inside an Arabic (rtl) page you may have a block of code, a URL, or an English form field that should stay left-to-right:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Without dir="ltr", the URL would inherit the page's rtl direction and its punctuation could be visually reordered in confusing ways.
A note on auto
auto is convenient for user-generated content (comments, usernames, search results) where you don't know the language in advance. But it relies on a simple heuristic: the browser scans for the first strong directional character and uses that to pick the direction for the whole element. This can be wrong — for instance, a comment that starts with an emoji, a number, or a Latin word but is mostly Arabic will be laid out left-to-right. For per-string isolation of unknown-direction text, prefer the <bdi> element, which both isolates the text and can apply auto.
dir vs. <bdo>, <bdi>, and CSS direction
These tools are related but solve different problems:
dirattribute — sets the base direction an element and its children inherit. The browser still applies the Unicode bidirectional (bidi) algorithm to reorder mixed-direction runs.<bdo>— bidirectional override. It forces a single direction and turns off the automatic bidi reordering for its content. Use it when you need to flip characters regardless of their natural direction.<bdi>— bidirectional isolation. It isolates a span of text so its direction can't affect surrounding text — ideal for embedding unpredictable user content.- CSS
direction— the styling-layer equivalent of thedirattribute. The HTMLdirattribute is generally preferred because it also informs assistive technologies and the bidi algorithm, whereas CSS alone does not always do so. When both are present, the attribute typically maps to the same computed value.
Browser support
The dir attribute is supported in all modern browsers and has been for a very long time, so you can use it without fallbacks.