<bdo>

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

• 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.

• 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.

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

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

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

• Apple Mail

  Komplett

• Gmail

  Teilweise

  Das dir-Attribut wird teilweise unterstützt, aber nicht immer zuverlässig auf bdo angewendet

• Outlook

  Keine

  Outlook (Word-Rendering) ignoriert bdo. Verwende inline CSS direction und unicode-bidi als Fallback

• Thunderbird

  Komplett

• Yahoo Mail

  Teilweise

  Eingeschränkte Unterstützung der Textrichtung