Document.dir is an instance property (string) for the text directionality of the document: "ltr" (left to right) or "rtl" (right to left). Learn how to read and set it, how it relates to the HTML dir attribute, and five examples with try-it labs.
Read / write
string
ltr / rtl
Often ltr
html dir
Baseline widely
Languages are not only different words—they also flow in different directions. English and many others read left to right (ltr). Arabic, Hebrew, and others often use right to left (rtl).
MDN: Document.dir is a string representing that directionality for the document. Possible values are "rtl" and "ltr". Setting it updates how the page lays out text and many UI directions (start/end edges, scrollbars in some cases, and bidirectional text).
Prefer declaring direction in HTML: <html lang="ar" dir="rtl">. Use document.dir when the user switches language/layout at runtime. See also the dir global attribute on MDN.
Related Document tutorials: designMode, defaultView, Document constructor.
Document.dirAn instance property on Document. You can read the current direction and assign a new one.
"ltr" — left to right (MDN; common default)."rtl" — right to left (MDN).dir attribute on nested elements when needed.lang and dir together when switching locales.// Read
document.dir
// Write
document.dir = "ltr";
document.dir = "rtl";A string: typically "ltr" or "rtl" (MDN).
document.dir = document.dir === "rtl" ? "ltr" : "rtl";| Goal | Code / note |
|---|---|
| Read direction | document.dir |
| Left to right | document.dir = "ltr" |
| Right to left | document.dir = "rtl" |
| Check RTL | document.dir === "rtl" |
| HTML default | <html dir="rtl" lang="ar"> |
| MDN status | Baseline Widely available |
Four facts about document.dir.
stringDirection
get + setRead / write
ltr | rtlMDN
baselineStandard API
| Value | Meaning | Typical languages |
|---|---|---|
ltr | Left to right | English, Spanish, Hindi (script), many others |
rtl | Right to left | Arabic, Hebrew, Persian, Urdu, … |
Always set a correct lang as well—direction alone is not localization.
Examples follow MDN Document: dir. Use View Output or Try It Yourself for each case.
Read the current direction and switch to RTL.
document.dirLog the document’s current text direction.
console.log(document.dir);
// Often "" or "ltr" depending on markup / browser defaultsIf no direction was set, some browsers may report an empty string while still laying out as LTR—setting an explicit value is clearer.
Flip the document to RTL and confirm the property.
document.dir = "rtl";
console.log(document.dir); // "rtl"Watch alignment and logical CSS (margin-inline-start, etc.) follow the new base direction in supporting layouts.
UI toggles and keeping markup in sync.
A simple direction switch for demos or language pickers.
function toggleDir() {
document.dir = document.dir === "rtl" ? "ltr" : "rtl";
console.log("Now:", document.dir);
}
toggleDir();Treat empty string as LTR if your UI needs a strict boolean: (document.dir || "ltr") === "rtl".
<html dir>Document.dir and the root element’s dir usually stay aligned.
document.dir = "rtl";
console.log("document.dir:", document.dir);
console.log("html.dir:", document.documentElement.dir);
console.log(
"attribute:",
document.documentElement.getAttribute("dir")
);Setting either the Document property or the root dir is the usual way to change page direction.
Map a few RTL language tags, then set lang and dir together.
function applyLocale(locale) {
const rtl = /^(ar|he|fa|ur)([-_]|$)/i.test(locale);
document.documentElement.lang = locale;
document.dir = rtl ? "rtl" : "ltr";
console.log(locale, "→", document.dir);
}
applyLocale("ar");
applyLocale("en-US");Real apps should use a maintained locale→direction table (or Intl metadata) instead of a tiny regex—this is a teaching sketch.
dir when the user picks an RTL locale.document.dir to choose start/end icons.dir on <html> for first paint.Via <html dir> or document.dir = ....
The document root becomes LTR or RTL.
Text flow, alignment, and many logical properties adapt.
dir can overrideA subsection can use a different direction without changing the whole page.
"ltr" and "rtl".lang for real localization.inline-start / inline-end) so layouts mirror correctly.Document.dir is marked Baseline Widely available on MDN (since March 2017). Logos use the shared browser-image-sprite.png sprite from this project.
Read/write string for document text directionality — "ltr" or "rtl".
Bottom line: Use document.dir to read or set page direction. Prefer
for the default, and logical CSS for mirrored layouts.Document.dir is the Document API for page text direction (ltr / rtl). Set it in markup when possible, and use the property when users switch languages or you need to mirror a layout at runtime.
Continue with doctype, designMode, defaultView, or the JavaScript hub.
dir on <html> for the default languagelang and dir together in locale switchers"ltr" when unset (may be "")dir for mixed-language snippetsdocument.dirDocument text direction — ltr or rtl.
ltr / rtl
APIbaseline
Standardget + set
DOMlang
i18nhtml dir
MarkupCSS logical properties such as margin-inline-start and padding-inline-end automatically flip when document.dir is rtl. That is why modern responsive designs prefer logical sides over hard-coded left / right.
Learn how to read the DocumentType for the document DTD.
6 people found this page helpful