HTMLElement.dir — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.dir

Beschreibung

Die Eigenschaft dir ist ein String, der das globale HTML-Attribut dir widerspiegelt. Sie legt fest, in welcher Richtung der Text eines Elements und seiner Nachfahren läuft: "ltr" (von links nach rechts, z. B. Deutsch, Englisch), "rtl" (von rechts nach links, z. B. Arabisch, Hebräisch) oder "auto", bei dem der Browser die Richtung anhand des ersten stark gerichteten Zeichens im Inhalt ermittelt.

Gebraucht wird dir vor allem in mehrsprachigen Anwendungen: beim Umschalten der Oberflächensprache, bei Eingabefeldern für Nutzerinhalte in unbekannter Sprache oder beim Anzeigen gemischter Texte (z. B. arabischer Nutzernamen in einer deutschen Oberfläche). Die Richtung wirkt sich auf die Textausrichtung, die Reihenfolge von Tabellenspalten, die Position von Scrollbalken und auf logische CSS-Eigenschaften wie margin-inline-start aus.

Wichtig: Die Eigenschaft liefert nur den ausdrücklich gesetzten Attributwert zurück, nicht die tatsächlich wirksame (geerbte) Richtung. Ist kein Attribut gesetzt, ist der Wert ein leerer String. Die berechnete Richtung erhält man über getComputedStyle(el).direction oder den CSS-Selektor :dir().

Parameter

Name	Typ	Default	Beschreibung
$value	"ltr" \| "rtl" \| "auto" \| ""	""	Beim Setzen: die gewünschte Schreibrichtung. Ungültige Werte werden als Attribut übernommen, beim Lesen aber als leerer String gemeldet. Ein leerer String entfernt die Richtungsangabe faktisch (Vererbung vom Elternelement).

Rückgabewert

Typ

string

Beschreibung

Der normalisierte Attributwert in Kleinbuchstaben: "ltr", "rtl", "auto" oder "", wenn kein bzw. ein ungültiger Wert gesetzt ist.

Beispiele

Schreibrichtung lesen und setzen

const absatz = document.createElement('p');
console.log(JSON.stringify(absatz.dir)); // kein Attribut gesetzt

absatz.dir = 'RTL';
console.log(absatz.dir);                  // normalisiert
console.log(absatz.getAttribute('dir'));  // Originalwert

absatz.dir = 'quer';
console.log(JSON.stringify(absatz.dir));  // ungültig

"" rtl RTL ""

Oberfläche beim Sprachwechsel spiegeln

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

const setzeSprache = (lang) => {
  const root = document.documentElement;
  root.lang = lang;
  root.dir = rtlSprachen.has(lang) ? 'rtl' : 'ltr';
  console.log(`${lang} → ${root.dir}`);
};

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

de → ltr ar → rtl

Eingabefeld für Nutzerinhalte automatisch ausrichten

const kommentar = document.createElement('textarea');
kommentar.dir = 'auto'; // Richtung folgt dem ersten stark gerichteten Zeichen
kommentar.value = 'مرحبا بالعالم';
document.body.append(kommentar);

// Gesetzter Wert vs. tatsächlich wirksame Richtung
console.log(kommentar.dir);
console.log(getComputedStyle(kommentar).direction);

auto rtl

Wirksame Richtung eines Elements ohne eigenes Attribut ermitteln

document.documentElement.dir = 'rtl';
const span = document.createElement('span');
document.body.append(span);

console.log(JSON.stringify(span.dir));           // nicht gesetzt
console.log(span.matches(':dir(rtl)'));          // geerbt
console.log(getComputedStyle(span).direction);

"" true rtl

// Wichtig · Fallstricke

Keine Vererbung beim Lesen: el.dir liefert nur den eigenen Attributwert. Für die tatsächlich wirksame Richtung getComputedStyle(el).direction oder el.matches(':dir(rtl)') nutzen.
Attribut statt CSS: Die Schreibrichtung sollte per dir gesetzt werden, nicht per CSS-Eigenschaft direction. Die Richtung gehört zum Inhalt und muss auch ohne Stylesheets (z. B. für Screenreader oder Reader-Ansichten) erhalten bleiben.
Normalisierung: Beim Lesen wird der Wert in Kleinbuchstaben geliefert; ungültige Werte ergeben "", obwohl getAttribute('dir') den Originalwert zeigt.
Sonderfall <bdi>: Dieses Element verhält sich ohne gesetztes Attribut wie dir="auto", meldet über dir aber trotzdem "".
"auto" nutzt eine einfache Heuristik (erstes stark gerichtetes Zeichen) und kann bei Texten, die mit Zahlen oder Zitaten in anderer Sprache beginnen, falsch liegen.
Kompatibilität: Die Eigenschaft wird von allen Browsern unterstützt; der Wert "auto" sowie der Selektor :dir() sind in allen aktuellen Browsern verfügbar (:dir() in Chrome erst seit Version 120).

Siehe auch

Element.matches() HTMLFormElement.rel HTMLElement.inert HTMLElement.lang HTMLElement.title