<bdi>: Das Bidirektionale Isolierungselement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <bdi>
-HTML-Element weist den bidirektionalen Algorithmus des Browsers an, den enthaltenen Text isoliert von seinem umgebenden Text zu behandeln. Es ist besonders nützlich, wenn eine Website dynamisch Text einfügt und die Richtung des eingefügten Textes nicht bekannt ist.
Probieren Sie es aus
Bidirektionaler Text ist Text, der sowohl Zeichenfolgen enthalten kann, die von links nach rechts (LTR) als auch solche, die von rechts nach links (RTL) angeordnet sind, wie ein arabisches Zitat, das in einen englischen Satz eingebettet ist. Browser implementieren den Unicode-Bidirektionalen Algorithmus, um dies zu handhaben. In diesem Algorithmus erhalten Zeichen eine implizite Richtung: Beispielsweise werden lateinische Zeichen als LTR behandelt, während arabische Zeichen als RTL behandelt werden. Einige andere Zeichen (wie Leerzeichen und einige Satzzeichen) werden als neutral behandelt und erhalten eine Richtung basierend auf den sie umgebenden Zeichen.
Normalerweise erledigt der bidirektionale Algorithmus die richtige Arbeit, ohne dass der Autor spezielles Markup bereitstellen muss, aber gelegentlich benötigt der Algorithmus Unterstützung. Hier kommt <bdi>
ins Spiel.
Das <bdi>
-Element wird verwendet, um einen Textabschnitt zu umgeben und den bidirektionalen Algorithmus anzuweisen, diesen Text isoliert von seiner Umgebung zu behandeln. Dies funktioniert in zwei Richtungen:
- Die Richtung des in
<bdi>
eingebetteten Textes beeinflusst nicht die Richtung des umgebenden Textes. - Die Richtung des in
<bdi>
eingebetteten Textes wird nicht durch die Richtung des umgebenden Textes beeinflusst.
Beispielsweise betrachten Sie einen Text wie:
EMBEDDED-TEXT - 1st place
Wenn EMBEDDED-TEXT
LTR ist, funktioniert dies einwandfrei. Aber wenn EMBEDDED-TEXT
RTL ist, wird - 1
als RTL-Text behandelt (da es aus neutralen und schwachen Zeichen besteht). Das Ergebnis wird durcheinandergebracht:
1 - EMBEDDED-TEXTst place
Wenn Sie die Richtung von EMBEDDED-TEXT
im Voraus kennen, können Sie dieses Problem beheben, indem Sie EMBEDDED-TEXT
in ein <span>
mit dem dir
-Attribut umschließen, das auf die bekannte Richtung gesetzt ist. Aber wenn Sie die Richtung nicht kennen - beispielsweise, weil EMBEDDED-TEXT
aus einer Datenbank gelesen oder vom Benutzer eingegeben wird - sollten Sie <bdi>
verwenden, um zu verhindern, dass die Richtung von EMBEDDED-TEXT
seine Umgebung beeinflusst.
Obwohl derselbe visuelle Effekt durch die Verwendung der CSS-Regel unicode-bidi: isolate
auf einem <span>
oder einem anderen textformatierenden Element erreicht werden kann, sollten HTML-Autoren diesen Ansatz nicht verwenden, da er nicht semantisch ist und Browser das Ignorieren von CSS-Stylings erlaubt ist.
Das Einbetten der Zeichen in <span dir="auto">
hat denselben Effekt wie die Verwendung von <bdi>
, aber seine Semantik ist weniger klar.
Attribute
Wie alle anderen HTML-Elemente unterstützt dieses Element die globalen Attribute, mit der Ausnahme, dass das dir
-Attribut anders als normal funktioniert: Es ist standardmäßig auf auto
gesetzt, was bedeutet, dass sein Wert niemals vom Elternelement geerbt wird. Dies bedeutet, dass, sofern Sie keinen Wert von entweder rtl
oder ltr
für dir
angeben, der User-Agent die korrekte Richtung basierend auf dem Inhalt des <bdi>
bestimmt.
Beispiele
Kein bdi mit nur LTR
Dieses Beispiel listet die Gewinner eines Wettbewerbs unter Verwendung von <span>
-Elementen. Wenn die Namen nur LTR-Text enthalten, sehen die Ergebnisse gut aus:
<ul>
<li><span class="name">Henrietta Boffin</span> - 1st place</li>
<li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
Kein bdi mit RTL-Text
Dieses Beispiel listet die Gewinner eines Wettbewerbs unter Verwendung von <span>
-Elementen, wobei einer der Gewinner einen Namen hat, der aus RTL-Text besteht. In diesem Fall wird das - 1
, das aus Zeichen mit neutraler oder schwacher Richtung besteht, die Richtung des RTL-Textes übernehmen, und das Ergebnis wird durcheinandergebracht:
<ul>
<li><span class="name">اَلأَعْشَى</span> - 1st place</li>
<li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
Verwendung von bdi mit LTR- und RTL-Text
Dieses Beispiel listet die Gewinner eines Wettbewerbs unter Verwendung von <bdi>
-Elementen. Diese Elemente weisen den Browser an, den Namen isoliert vom Einbettungskontext zu behandeln, sodass die beispielhafte Ausgabe korrekt geordnet ist:
<ul>
<li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
<li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>
Technische Zusammenfassung
Inhaltskategorien | Fließender Inhalt, Phrasierungsinhalt, wahrnehmbarer Inhalt. |
---|---|
Erlaubter Inhalt | Phrasierungsinhalt. |
Tag-Auslassung | Keine, sowohl der Start- als auch der End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Phrasierungsinhalt akzeptiert. |
Implizierte ARIA-Rolle | generisch |
Erlaubte ARIA-Rollen | Irgendeine |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-bdi-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Inline-Markup und bidirektionaler Text in HTML
- Grundlagen des Unicode-Bidirektionalen Algorithmus
- Lokalisierung
- Verwandtes HTML-Element:
<bdo>
- Verwandte CSS-Eigenschaften:
direction
,unicode-bidi