The dir attribute is a global HTML attribute that controls text direction within an element. Use it for left-to-right (LTR) languages like English, right-to-left (RTL) languages like Arabic and Hebrew, or let the browser detect direction automatically with auto.
Most elements.
Left to right.
Right to left.
Detect from text.
Document level.
element.dir.
dirThe primary purpose of the dir attribute is to define how text flows within an HTML element. Browsers use direction to align text, position punctuation, order list markers, and lay out mixed LTR and RTL content correctly.
By default, most documents use LTR direction. For RTL languages, set dir="rtl" on the <html> element or on specific blocks that contain RTL text. Pair dir with the lang attribute so screen readers and search engines understand the language.
Use dir on <html> for an entire RTL page. Use it on individual elements when only part of the page switches language or direction.
Add dir to any element that needs explicit text direction:
<p dir="rtl">مرحبًا! هذا نص عربي.</p>
<p dir="ltr">This paragraph flows left to right.</p><html>, <body>, <div>, and <p>.ltr, rtl, or auto (case-insensitive).lang when marking a different language.The dir attribute accepts three keyword values:
ltr — Left-to-right text direction. Default for English and most European languages.rtl — Right-to-left text direction. Used for Arabic, Hebrew, Persian, Urdu, and similar scripts.auto — Browser determines direction from the first strongly directional character in the content.<html lang="ar" dir="rtl">…</html>
<p dir="auto">Hello world</p>
<p dir="auto">مرحبًا</p>| Value | Direction | Typical use |
|---|---|---|
ltr | Left to right | English, Spanish, French |
rtl | Right to left | Arabic, Hebrew, Persian |
auto | Auto-detected | Mixed or unknown content |
| Default | Usually ltr | When dir is omitted |
| JS property | element.dir | Dynamic language switch |
| Pair with | lang | Accessibility & SEO |
| Element | Supported? | Notes |
|---|---|---|
<html> | Yes | Sets document-wide direction |
<body>, <div>, <p> | Yes | Common block-level use |
<span>, <a> | Yes | Inline RTL/LTR snippets |
<input>, <textarea> | Yes | Form field text direction |
<script>, <img> | Yes (global) | Rarely needed on these |
direction| Approach | HTML dir | CSS direction |
|---|---|---|
| Semantic meaning | Yes — exposes direction to AT | Presentation only |
| Where to set | HTML attribute | Stylesheet |
| Best practice | Prefer for language/content | Use for visual tweaks only |
| Values | ltr, rtl, auto | ltr, rtl |
LTR and RTL paragraphs, JavaScript toggling, and auto detection with document-level direction.
Set explicit direction on each paragraph:
<p dir="ltr">This paragraph flows left to right.</p>
<p dir="rtl">مرحبًا! هذا فقرة باتجاه من اليمين إلى اليسار.</p>The first paragraph uses default LTR flow. The second uses dir="rtl" so Arabic text aligns from the right edge.
Change direction at runtime based on user choice or locale:
<p id="dynamicElement">…</p>
<script>
var element = document.getElementById("dynamicElement");
element.dir = useRtl ? "rtl" : "ltr";
</script>The dir IDL property accepts ltr, rtl, or auto. Updating it immediately reflows the element’s text direction.
Use auto for mixed content, and set dir on <html> for full RTL pages:
<p dir="auto">Hello — LTR detected</p>
<p dir="auto">مرحبًا — RTL detected</p>
<html lang="ar" dir="rtl">…</html>With auto, the browser inspects the first strong directional character. For entire Arabic or Hebrew sites, set both lang and dir on the root <html> element.
lang="ar" dir="rtl").margin-inline-start) in RTL.ltr, rtl, or auto on an element or html.
Unicode bidirectional algorithm orders characters.
Punctuation, lists, and inputs follow direction.
Content displays correctly for LTR and RTL readers.
The dir attribute is supported in all modern browsers. It has been part of HTML for decades and works consistently across platforms.
All major browsers honor dir on global elements including ltr, rtl, and auto.
Bottom line: Use dir confidently for multilingual and RTL content in all modern projects.
The dir attribute is a crucial tool for controlling text direction in HTML. With ltr, rtl, and auto, you can serve multilingual audiences and ensure content displays correctly for every writing system.
Set direction at the appropriate scope, pair it with lang, and test your pages in both LTR and RTL modes for a better user experience.
dirBookmark these before building multilingual pages.
Most elements.
ScopeExplicit flow.
ValuesDetect direction.
Mixed textDocument RTL.
i18nPair with lang.
A11yltr), right-to-left (rtl), or auto-detected (auto).ltr, rtl, and auto. Invalid values fall back to ltr in most browsers.<html>, <p>, and <span>.auto when content language is unknown or mixed, such as user comments, names, or feeds with multiple scripts.dir for semantic text direction. CSS direction is for presentation; combine with logical properties for layout.element.dir = "rtl" (or ltr / auto) to switch direction dynamically.Practice dir="ltr", rtl, and auto with Arabic and English examples in the Try It editor.
3 people found this page helpful