<bdi>

Das <bdi>-Element isoliert Text mit potenziell anderer Textrichtung vom umgebenden Inhalt. BDI steht für “Bi-Directional Isolation”. Es verhindert, dass arabischer, hebräischer oder anderer RTL-Text das Layout des umgebenden LTR-Textes durcheinanderbringt. Im Unterschied zu <bdo>, das eine Richtung erzwingt, lässt <bdi> den Browser die korrekte Richtung automatisch erkennen: es isoliert den Text nur, damit er den Rest nicht beeinflusst.

Steckbrief <bdi>

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 05.02.2026

Grundlagen

Wenn du dynamische Inhalte anzeigst, zum Beispiel Benutzernamen aus einer Datenbank, weißt du vorher nicht, in welcher Sprache und Schriftrichtung der Name geschrieben ist. Ohne <bdi> kann ein arabischer Benutzername die Reihenfolge des umgebenden deutschen Textes durcheinanderbringen. <bdi> löst genau dieses Problem.

<bdi> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
<bdi> hat keine elementspezifischen Attribute, nur die globalen HTML-Attribute
Der Browser bestimmt die Textrichtung automatisch anhand der enthaltenen Zeichen
<bdi> isoliert den Text: Die Richtung des Inhalts beeinflusst nicht den umgebenden Text
Der Unterschied zu <bdo>: <bdi> isoliert und lässt den Browser entscheiden, <bdo> erzwingt eine bestimmte Richtung
Typische Anwendungsfälle: Benutzernamen, dynamische Inhalte aus Datenbanken, mehrsprachige Listen
Besonders wichtig bei User-Generated Content, wo die Sprache des Inhalts unbekannt ist

Syntax

index.html

Grundsyntax

<p>Benutzer: <bdi>محمد</bdi> hat 5 neue Beiträge.</p>

Beispiele

3 Beispiele

Der Effekt von <bdi> wird sichtbar, wenn Elemente dir="auto" verwenden, also wenn der Browser die Textrichtung pro Element anhand des Inhalts bestimmt. Das ist der typische Fall bei dynamischen Listen mit User-Generated Content. Ohne <bdi> erkennt dir="auto" den arabischen Namen als erstes starkes Zeichen und dreht die ganze Zeile auf RTL. Mit <bdi> wird der Name isoliert: dir="auto" überspringt ihn und findet den lateinischen Text dahinter:

index.html

Ohne vs. mit bdi

<!-- Ohne bdi: dir="auto" erkennt den arabischen Namen
     und dreht die ganze Zeile auf RTL -->
<ul>
  <li dir="auto">إبراهيم - 90 Punkte</li>
  <li dir="auto">Mario - 85 Punkte</li>
</ul>

<!-- Mit bdi: Der Name wird isoliert,
     dir="auto" findet den lateinischen Text → LTR -->
<ul>
  <li dir="auto"><bdi>إبراهيم</bdi> - 90 Punkte</li>
  <li dir="auto"><bdi>Mario</bdi> - 85 Punkte</li>
</ul>

Der wichtigste Anwendungsfall: Eine Liste mit Benutzernamen, die in verschiedenen Sprachen und Schriftrichtungen vorliegen können. <bdi> stellt sicher, dass jeder Name korrekt dargestellt wird, ohne den Rest der Liste zu beeinflussen:

index.html

Mehrsprachige Benutzerliste

<ul>
  <li><bdi>Mario</bdi>: 12 Beiträge</li>
  <li><bdi>محمد</bdi>: 8 Beiträge</li>
  <li><bdi>יוסף</bdi>: 5 Beiträge</li>
  <li><bdi>田中太郎</bdi>: 3 Beiträge</li>
</ul>

In Web-Anwendungen mit Templates (React, Astro, etc.) solltest du <bdi> immer dann verwenden, wenn der Inhalt aus einer Datenbank oder API kommt und die Sprache unbekannt ist:

index.html

Dynamische Inhalte

<!-- In einem Template: Benutzername und Titel aus der Datenbank -->
<p>
  <bdi>{username}</bdi> hat den Artikel
  "<bdi>{articleTitle}</bdi>" veröffentlicht.
</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: <bdi> beeinflusst die Lesereihenfolge des Screenreaders positiv. Ohne <bdi> kann ein RTL-Name dazu führen, dass der umgebende Text in falscher Reihenfolge vorgelesen wird. Mit <bdi> bleibt die korrekte Reihenfolge erhalten.
Korrekte Isolation: <bdi> stellt sicher, dass Assistenztechnologien den Text in der richtigen Reihenfolge lesen, auch bei gemischten Schriftrichtungen. Das ist besonders wichtig für Benutzerlisten und dynamische Inhalte.
Kein visueller Effekt: <bdi> ändert die Darstellung des Textes nicht sichtbar. Es wirkt ausschließlich auf die Textrichtungs-Isolation: ein rein funktionales Element ohne visuelle Nebenwirkungen.

Häufige Fehler

3 Punkte

bdi vergessen bei dynamischen Inhalten: Der häufigste Fehler: Benutzernamen oder andere Datenbank-Inhalte ohne <bdi> einbetten. Solange alle Nutzer lateinische Schrift verwenden, fällt es nicht auf. Sobald ein arabischer oder hebräischer Name auftaucht, kann das Layout brechen. Gewöhne dir an, dynamische Text-Inhalte immer mit <bdi> zu umschließen.
bdi statt bdo verwenden (und umgekehrt): <bdi> isoliert und lässt den Browser entscheiden. <bdo> erzwingt eine Richtung. Wenn du die Richtung explizit steuern willst, brauchst du <bdo>. Wenn du nur sicherstellen willst, dass der Text den Rest nicht beeinflusst, ist <bdi> richtig.
span statt bdi verwenden: <span> isoliert die Textrichtung nicht. Auch <span dir="auto"> ist nicht gleichwertig mit <bdi>, da <span> standardmäßig die Richtung des Elternelements erbt. <bdi> hat dir="auto" als Standard und bietet echte Isolation.

Browser-Kompatibilität

5 von 5

Das bdi-Element wird von allen modernen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Die Unterstützung von bdi in Email-Clients ist sehr eingeschränkt. Die meisten Clients ignorieren das Element und seine Isolation.

Apple Mail

Teilweise

Grundlegende Unterstützung, aber Isolation nicht immer zuverlässig
Gmail

Keine

Gmail ignoriert bdi und behandelt es als unbekanntes Element
Outlook

Keine

Outlook (Word-Rendering) kennt bdi nicht. Verwende dir-Attribut auf span als Fallback
Thunderbird

Teilweise

Grundlegende Darstellung, Isolation nicht garantiert
Yahoo Mail

Keine

bdi wird nicht unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<bdi>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter