Document.dir — Eigenschaft · JavaScript-Referenz

Signatur

Document.dir

Beschreibung

Document.dir ist eine lesbare und schreibbare String-Eigenschaft, die das dir-Attribut des Wurzelelements (document.documentElement, meist <html>) widerspiegelt. Sie legt fest, in welcher Richtung Text und Inline-Inhalte im gesamten Dokument fließen: "ltr" (links nach rechts, z. B. Deutsch oder Englisch) oder "rtl" (rechts nach links, z. B. Arabisch, Hebräisch, Persisch).

Gebraucht wird die Eigenschaft vor allem in mehrsprachigen Anwendungen: Wechselt der Nutzer zur Laufzeit von Deutsch zu Arabisch, setzt man document.dir = "rtl" (zusammen mit document.documentElement.lang). Das Layout spiegelt sich dann automatisch – vorausgesetzt, das CSS nutzt logische Eigenschaften wie margin-inline-start statt margin-left.

Beim Lesen wird der Wert auf bekannte Schlüsselwörter normalisiert: Gültig sind "ltr", "rtl" und "auto" (Groß-/Kleinschreibung wird ignoriert und in Kleinbuchstaben zurückgegeben). Ist das Attribut nicht gesetzt oder hat es einen ungültigen Wert, liefert die Eigenschaft einen leeren String – auch wenn der Browser dann effektiv „ltr“ rendert.

Parameter

Name	Typ	Default	Beschreibung
$wert (bei Zuweisung)	string	""	Neue Schreibrichtung: `"ltr"`, `"rtl"` oder `"auto"`. Die Zuweisung setzt das `dir`-Attribut des `<html>`-Elements. Ungültige Werte werden zwar ins Attribut geschrieben, beim Lesen aber als `""` zurückgegeben.

Rückgabewert

Typ

string

Beschreibung

"ltr", "rtl", "auto" oder "", wenn kein bzw. ein ungültiges dir-Attribut am Wurzelelement gesetzt ist.

Beispiele

Aktuelle Schreibrichtung auslesen

// <html lang="de"> ohne dir-Attribut
console.log(document.dir); // leerer String

document.documentElement.setAttribute('dir', 'RTL');
console.log(document.dir); // normalisiert auf Kleinbuchstaben

"" "rtl"

Sprachumschaltung mit Richtungswechsel

const RTL_SPRACHEN = new Set(['ar', 'he', 'fa', 'ur']);

const setzeSprache = (lang) => {
  document.documentElement.lang = lang;
  document.dir = RTL_SPRACHEN.has(lang) ? 'rtl' : 'ltr';
  console.log(`Sprache: ${lang}, Richtung: ${document.dir}`);
};

setzeSprache('ar');
setzeSprache('de');

Sprache: ar, Richtung: rtl Sprache: de, Richtung: ltr

Effektive Richtung ermitteln (auch ohne Attribut)

// document.dir liefert "" wenn nichts gesetzt ist –
// die tatsächlich gerenderte Richtung kommt aus dem CSS
const effektiveRichtung = () =>
  document.dir || getComputedStyle(document.documentElement).direction;

console.log(effektiveRichtung());

"ltr"

Richtung per Button umschalten

const button = document.createElement('button');
button.textContent = 'Richtung umschalten';
button.addEventListener('click', () => {
  document.dir = document.dir === 'rtl' ? 'ltr' : 'rtl';
  button.textContent = `Aktuell: ${document.dir}`;
});
document.body.append(button);

// Wichtig · Fallstricke

Leerer String ≠ „ltr“: Ohne gesetztes Attribut liefert document.dir "", obwohl der Browser von links nach rechts rendert. Für die tatsächliche Richtung getComputedStyle(el).direction verwenden.
Ungültige Werte: Eine Zuweisung wie document.dir = "rechts" landet im Attribut, wird beim Lesen aber als "" gemeldet und vom Browser ignoriert.
Nur Wurzelelement: Einzelne Bereiche mit abweichender Richtung setzt man über HTMLElement.dir bzw. das dir-Attribut am jeweiligen Element; bei Nutzereingaben unbekannter Sprache ist dir="auto" sinnvoll.
CSS: Der Richtungswechsel spiegelt nur Layouts korrekt, die logische CSS-Eigenschaften (inline-start/inline-end, text-align: start) nutzen. Das HTML-Attribut ist gegenüber der CSS-Eigenschaft direction zu bevorzugen.
Kompatibilität: In allen modernen Browsern unterstützt. Der Wert "auto" wird bei sehr alten Browsern möglicherweise nicht erkannt. Gibt es kein documentElement, bewirkt das Setzen nichts.

Siehe auch

HTMLElement.dir Document.documentElement HTMLElement.lang Window.getComputedStyle() Element.setAttribute() CSSScale.z CSSSkewX.ax