HTML dir-Attribut
Das dir-Attribut ist Teil der globalen Attribute und legt die Textrichtung des Inhalts eines Elements fest. Erfahren Sie, für welche Elemente es verwendet werden kann.
Das HTML-Attribut dir gibt die Basistextrichtung des Inhalts eines Elements an. Es ist unverzichtbar, um HTML in Rechts-nach-links-Schriften (RTL) wie Arabisch, Hebräisch, Persisch und Urdu korrekt darzustellen. Hunderte von Millionen Menschen lesen Sprachen, die in diesen Schriften verfasst sind, weshalb das korrekte Festlegen der Richtung ein grundlegender Bestandteil der Internationalisierung ist.
dir ist ein globales Attribut, das auf jedem HTML-Element verwendet werden kann. Der Wert, den ein Element verwendet, wird vom nächsten Vorfahren geerbt, der dir gesetzt hat; fehlt ein solcher, wird ltr als Fallback verwendet.
Werte
Das dir-Attribut kann drei Werte annehmen:
ltr— Textrichtung von links nach rechts (Standard in den meisten Browsern). Wird für lateinische, kyrillische, griechische, CJK- und die meisten anderen Schriften verwendet.rtl— Textrichtung von rechts nach links. Wird für Arabisch, Hebräisch und ähnliche Schriften verwendet.auto— Der Browser entscheidet anhand des Inhalts, indem er die Heuristik des ersten starken Richtungszeichens anwendet (siehe Hinweis unten).
Syntax
<tag dir="ltr | rtl | auto">content</tag>Dokumentrichtung mit dir auf <html> festlegen
Die häufigste und wichtigste Verwendung von dir ist auf dem <html>-Element. Damit wird die Basisrichtung für die gesamte Seite festgelegt, die alle Elemente erben. Bei einer arabischen oder hebräischen Seite sollte dir="rtl" immer mit dem passenden lang-Attribut kombiniert werden:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Da dir="rtl" auf <html> gesetzt ist, verlaufen Überschrift, Absatz, Listenzeichen, Scrollleistenposition und Standard-Textausrichtung ohne zusätzliches Markup von rechts nach links.
Beispiel: sichtbarer RTL-Effekt
Das ursprüngliche Beispiel hat dir="rtl" auf englischem Text verwendet, wo der Effekt kaum merklich ist. Die Richtungsänderung ist nur mit echtem RTL-Text oder bei gemischter Zeichensetzung offensichtlich. Vergleichen Sie diese Absätze:
<!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>Im rtl-Absatz verläuft das Hebräische von rechts nach links, und der nachfolgende Text sowie die Satzzeichen werden entsprechend umgeordnet. Im auto-Absatz erkennt der Browser das erste starke Zeichen (Hebräisch) und wählt automatisch rtl.
Wann ltr explizit gesetzt werden sollte
Das Setzen von dir="ltr" auf einem untergeordneten Element ist nützlich, um eine geerbte rtl-Richtung zu überschreiben. Zum Beispiel kann eine arabische (rtl) Seite einen Code-Block, eine URL oder ein englisches Formularfeld enthalten, das links-nach-rechts bleiben soll:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Ohne dir="ltr" würde die URL die rtl-Richtung der Seite erben, und ihre Satzzeichen könnten auf verwirrende Weise visuell umgeordnet werden.
Hinweis zu auto
auto ist praktisch für nutzergenerierte Inhalte (Kommentare, Benutzernamen, Suchergebnisse), wenn die Sprache nicht im Voraus bekannt ist. Es basiert jedoch auf einer einfachen Heuristik: Der Browser sucht nach dem ersten starken Richtungszeichen und leitet daraus die Richtung für das gesamte Element ab. Dies kann falsch sein — zum Beispiel wird ein Kommentar, der mit einem Emoji, einer Zahl oder einem lateinischen Wort beginnt, aber hauptsächlich auf Arabisch verfasst ist, links-nach-rechts dargestellt. Für die zeichenkettenweise Isolation von Text mit unbekannter Richtung empfiehlt sich das <bdi>-Element, das den Text sowohl isoliert als auch auto anwenden kann.
dir vs. <bdo>, <bdi> und CSS direction
Diese Werkzeuge sind verwandt, lösen aber unterschiedliche Probleme:
dir-Attribut — legt die Basisrichtung fest, die ein Element und seine Kinder erben. Der Browser wendet weiterhin den Unicode-Bidirektionalitäts-(Bidi-)Algorithmus an, um Abschnitte mit gemischter Richtung umzuordnen.<bdo>— Bidirektionale Überschreibung. Erzwingt eine einzige Richtung und deaktiviert die automatische Bidi-Umordnung für seinen Inhalt. Verwenden Sie es, wenn Zeichen unabhängig von ihrer natürlichen Richtung gespiegelt werden sollen.<bdi>— Bidirektionale Isolation. Isoliert einen Textabschnitt, sodass seine Richtung den umgebenden Text nicht beeinflusst — ideal zum Einbetten unvorhersehbarer Nutzerinhalte.- CSS
direction— das Styling-Äquivalent desdir-Attributs auf Stilebene. Das HTML-dir-Attribut ist generell vorzuziehen, da es auch Hilfstechnologien und den Bidi-Algorithmus informiert, was CSS allein nicht immer gewährleistet. Sind beide vorhanden, wird das Attribut in der Regel auf denselben berechneten Wert abgebildet.
Browser-Unterstützung
Das dir-Attribut wird von allen modernen Browsern unterstützt und das schon seit sehr langer Zeit, sodass Sie es ohne Fallbacks verwenden können.