<bdo>

Zuletzt aktualisiert am 5. Februar 2026

Das <bdo>-Element überschreibt die Textrichtung. BDO steht für “Bi-Directional Override”. Es erzwingt, dass der enthaltene Text in einer bestimmten Richtung dargestellt wird: von links nach rechts (ltr) oder von rechts nach links (rtl). Das ist nützlich, wenn der Browser die Textrichtung falsch erkennt oder du die Richtung bewusst umkehren willst, zum Beispiel für Teilenummern, die in einer bestimmten Richtung gelesen werden müssen.

Grundlagen

Der Browser bestimmt die Textrichtung normalerweise automatisch anhand des Unicode-Algorithmus. Manchmal reicht das nicht aus, etwa wenn du Text in einer bestimmten Richtung erzwingen musst. Genau dafür gibt es <bdo>.

• <bdo> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Das dir-Attribut ist erforderlich und bestimmt die Textrichtung: ltr (links nach rechts) oder rtl (rechts nach links)
• <bdo> überschreibt den Unicode-Bidi-Algorithmus komplett: der Text wird in der angegebenen Richtung dargestellt, unabhängig von den enthaltenen Zeichen
• Der Unterschied zu <bdi>: <bdo> erzwingt eine Richtung, <bdi> isoliert Text und lässt den Browser die Richtung automatisch bestimmen
• Typische Anwendungsfälle: RTL-Sprachen (Arabisch, Hebräisch) korrekt darstellen, Textrichtung erzwingen bei gemischten Inhalten
• Ohne dir-Attribut hat <bdo> keine definierte Wirkung, vergiss es nicht

Syntax

<p>Arabisch: <bdo dir="rtl">مرحبا</bdo></p>

Attribute

Beispiele

Text umkehren mit RTL

Mit dir="rtl" wird lateinischer Text rückwärts dargestellt. Das zeigt deutlich, wie <bdo> die Textrichtung komplett überschreibt:

<p>Normal: Hello World</p>
<p>Umgekehrt: <bdo dir="rtl">Hello World</bdo></p>

Teilenummern in bestimmter Leserichtung erzwingen

Manchmal müssen Codes oder Teilenummern in einer bestimmten Richtung gelesen werden, unabhängig von der Dokumentsprache. Hier erzwingt <bdo> die Leserichtung für eine Produktkennung:

<p>Teilenummer: <bdo dir="ltr">AB-1234-XY</bdo></p>
<p>Umgekehrt gelesen: <bdo dir="rtl">AB-1234-XY</bdo></p>

LTR erzwingen in RTL-Kontext

In einem RTL-Dokument kannst du mit dir="ltr" einzelne Textpassagen in die westliche Leserichtung zwingen, z.B. für Code, URLs oder englische Fachbegriffe:

<div dir="rtl">
  <p>
    للمزيد من المعلومات، قم بزيارة:
    <bdo dir="ltr">https://example.com</bdo>
  </p>
</div>

Barrierefreiheit

• Screenreader-Verhalten: Screenreader lesen den Text in der durch <bdo> erzwungenen Richtung vor. Das bedeutet, dass bei dir="rtl" lateinischer Text buchstabenweise rückwärts gelesen werden kann. Setze <bdo> daher nur ein, wenn die Richtungsänderung semantisch korrekt ist.
• Nicht für visuelle Spielereien verwenden: Text rückwärts darzustellen mag optisch interessant sein, verwirrt aber Screenreader-Nutzer und erschwert die Bedienung. Verwende <bdo> nur für tatsächliche Sprachrichtungswechsel.
• Sprache deklarieren: Wenn du RTL-Text einbettest, ergänze das lang-Attribut (z.B. lang="ar" für Arabisch). So weiß der Screenreader, welche Ausspracheregeln gelten.

Häufige Fehler

• dir-Attribut vergessen: Ohne dir-Attribut hat <bdo> keine definierte Wirkung. Das Element ergibt nur mit dir="ltr" oder dir="rtl" Sinn. Ohne dieses Attribut passiert im Browser nichts Sinnvolles.

• bdo statt bdi verwenden: Wenn du Text nur isolieren willst (z.B. einen Benutzernamen, der in einer RTL-Sprache sein könnte), ist <bdi> die bessere Wahl. <bdo> erzwingt eine bestimmte Richtung, <bdi> lässt den Browser die richtige Richtung automatisch bestimmen.

• bdo für rein visuelles Spiegeln: Text mit <bdo dir="rtl"> rückwärts darzustellen nur als visuellen Effekt ist ein Missbrauch des Elements. Für solche Effekte verwende CSS direction: rtl oder unicode-bidi: bidi-override mit einer erklärenden Klasse.

Browser-Kompatibilität

Das bdo-Element wird von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Die Unterstützung von bdo in Email-Clients ist eingeschränkt. Viele Clients ignorieren das dir-Attribut oder die Textrichtung.

Verwandte Elemente