<bdi>

Zuletzt aktualisiert am 5. Februar 2026

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.

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

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

Beispiele

Problem ohne bdi

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:

<!-- 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>

Benutzerliste mit gemischten Sprachen

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:

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

Dynamische Inhalte in Templates

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:

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

Barrierefreiheit

• 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

• 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

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

Email-Kompatibilität

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

Verwandte Elemente