Tag <bdi>

Tag <bdi>

Definition

Status: Aktueller Standard

Das Tag <bdi> steht für bidirectional isolation (Richtungstrennung).

Das <bdi>-Tag (Bidirectional Isolation) ist ein modernes HTML5-Element, das für die korrekte Anzeige von Texten mit unterschiedlichen Schreibrichtungen (z. B. Arabisch/Hebräisch vs. Deutsch) entscheidend ist. Es isoliert einen Textabschnitt von seiner Umgebung, damit die Schreibrichtung (links-nach-rechts oder rechts-nach-links) der umgebenden Elemente nicht beeinflusst wird – und umgekehrt. Das <bdi>-Element ist besonders nützlich, wenn dynamisch generierte Inhalte (z. B. Benutzernamen, die in verschiedenen Sprachen eingegeben werden können) korrekt dargestellt werden sollen, ohne die Layout-Struktur der Seite zu stören. Es sorgt dafür, dass die Schreibrichtung des eingeschlossenen Textes unabhängig von der umgebenden Schreibrichtung korrekt interpretiert wird.

Syntax

<bdi>...</bdi>

Attribute

Global: Globale Attribute

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel bdi

Der Code:

<ul>
 <li>User <bdi>Max</bdi>: 100 Punkte</li>
 <li>User <bdi>إيان</bdi>: 90 Punkte</li> <!-- Arabisch wird isoliert -->
 <li>User إيان: 90 Punkte</li> <!-- ohne bdi -->
</ul>

Ergebnis:

Ergebnis: <bdi>-Demo 1

Ohne <bdi> würde im zweiten Fall die "90" eventuell links vom Namen erscheinen (siehe dritte Zeile), was das Layout zerstört. Mit <bdi> wird der Name "إيان" korrekt isoliert, sodass die Punktezahl immer rechts vom Namen erscheint, unabhängig von der Schreibrichtung.

Anmerkungen

Bitte <bdi> nicht mit <bdo> verwechseln. Mit <bdi>: "Ich weiß nicht, welche Richtung dieser Text hat, bitte behandle ihn neutral und isoliert". Mit <bdo>: Ich weiß genau, was ich tue. Erzwinge diese Schreibrichtung (z.B. mit dir="rtl"), egal was der Browser denkt".