HTML <bdi> Tag
Das HTML <bdi>-Tag isoliert einen Textabschnitt unbekannter Schreibrichtung, damit die Umgebung korrekt dargestellt bleibt.
Das HTML-<bdi>-Tag (der Name steht für bi-directional isolation, also bidirektionale Isolation) ist eines der HTML5-Elemente. Es markiert einen Textabschnitt, der in einer anderen Schreibrichtung verlaufen kann als der umgebende Text, und isoliert ihn, sodass der bidirektionale Algorithmus des Browsers ihn als eigenständige, in sich geschlossene Einheit behandelt.
Der klassische Anwendungsfall ist die Darstellung eines dynamischen Werts unbekannter Schreibrichtung — ein Benutzername, ein Produktname oder eine beliebige Zeichenkette aus einer Datenbank — in einem von links nach rechts (LTR) verlaufenden Satz. Man weiß im Voraus nicht, ob dieser Wert Englisch (John), Arabisch (أحمد) oder Hebräisch (דוד) ist. Ohne Isolation kann ein RTL-Wert „auslaufen" und die benachbarten LTR-Zeichen umordnen, wodurch der Rest der Zeile unleserlich wird. Durch das Einschließen des Werts in <bdi> wird das verhindert.
<p>User <bdi>أحمد</bdi> scored 90 points.</p>Hier behält أحمد seine eigene Rechts-nach-links-Reihenfolge, während der Rest des Satzes — einschließlich der Punktzahl und der umgebenden Wörter — korrekt von links nach rechts bleibt.
Warum bidirektionaler Text Isolation benötigt
Bidirektionaler Text mischt Sequenzen von rechts-nach-links (RTL) und links-nach-rechts (LTR) verlaufenden Zeichen. Um ihn darzustellen, führen Browser den Unicode Bidirectional Algorithm aus, der jedem Zeichen eine Schreibrichtung zuweist. Manche Zeichen — viele Satzzeichen, Ziffern und Leerzeichen — sind neutral: Ihre Richtung wird aus dem Kontext der Nachbarzeichen abgeleitet.
Genau diese Ableitung ist das Problem. Wenn ein neutrales Zeichen (etwa das Leerzeichen und die Zahl nach einem Namen) neben einem RTL-Abschnitt steht, kann der Algorithmus es in den RTL-Fluss ziehen, sodass eine nachfolgende Punktzahl oder ein Satzzeichen auf die falsche Seite der Zeile springt. <bdi> behebt das, indem es eine Isolationsgrenze um den eingebetteten Text zieht: Zeichen innerhalb können die Richtung von Zeichen außerhalb nicht beeinflussen — und umgekehrt.
Kurz gesagt: <bdi> schließt einen Textabschnitt ein und garantiert:
- Die Schreibrichtung des Texts innerhalb des
<bdi>beeinflusst den umgebenden Text nicht. - Die Schreibrichtung des umgebenden Texts beeinflusst den Text innerhalb des
<bdi>nicht.
Vorher und nachher: den Unterschied sehen
Das folgende Beispiel rendert dieselbe dynamisch aussehende Zeichenkette zweimal. Die erste Zeile verwendet ein einfaches <span>, die zweite schließt sie in <bdi> ein. Bei einem Rechts-nach-links-Wert lässt die <span>-Version den nachfolgenden Text auf die falsche Seite abdriften, während die <bdi>-Version lesbar bleibt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Without bdi vs. with bdi</h1>
<!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
<p>User <span>إيان</span>: 90 points.</p>
<!-- WITH isolation: the name is self-contained, the rest stays LTR -->
<p>User <bdi>إيان</bdi>: 90 points.</p>
</body>
</html>Führen Sie das Beispiel aus: Im ersten Absatz kann der Doppelpunkt mit der Zahl auf die falsche Seite des arabischen Namens gezogen werden; im zweiten hält <bdi> das : 90 points. korrekt auf der rechten Seite.
<bdi> vs. dir="auto"
Man könnte sich fragen, warum man nicht einfach dir="auto" auf einem <span> verwenden kann. Das Setzen von dir="auto" weist den Browser zwar an, die Richtung des Elements aus seinem Inhalt zu ermitteln — bei einem normalen Inline-Element erzeugt es jedoch keine Isolationsgrenze, sodass das Element die Darstellung des umgebenden Texts nach wie vor beeinflussen kann.
Das <bdi>-Element tut beides auf einmal: Es erkennt die Richtung automatisch und isoliert. Tatsächlich verhält sich <bdi> wie ein <span dir="auto">, der zusätzlich isoliert ist — genau das, was man für einen eingebetteten Wert unbekannter Richtung benötigt. Die Verwendung von <bdi> macht die Absicht deutlich und macht das manuelle Setzen des Attributs überflüssig.
<bdi> vs. <bdo>
<bdi> wird häufig mit dem <bdo>-Element (bi-directional override) verwechselt, aber sie erfüllen entgegengesetzte Aufgaben:
<bdo>erzwingt eine Richtung. Es muss eindir-Attribut (dir="rtl"oderdir="ltr") angegeben werden, und es überschreibt den Algorithmus, um den Text in genau dieser Richtung darzustellen.<bdi>erkennt und isoliert. Es kehrt den Text nicht um. Es lässt den Algorithmus die Richtung des enthaltenen Texts eigenständig bestimmen, schützt ihn dabei vor dem umgebenden Text — und schützt die Seite vor ihm.
Verwenden Sie <bdo>, wenn Sie die Richtung kennen und erzwingen möchten; verwenden Sie <bdi>, wenn die Richtung unbekannt ist (dynamischer Inhalt) und Sie eine sichere, automatische Behandlung wünschen.
Syntax
Das <bdi>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<bdi>) und dem schließenden (</bdi>) Tag:
<bdi>Some text of unknown directionality</bdi>Standard-CSS-Rendering
Browser wenden auf das Element diesen Standard-Stil an:
bdi {
display: inline;
unicode-bidi: isolate;
}Der Wert unicode-bidi: isolate ist das, was die oben beschriebene Isolationsgrenze erzeugt. In der Regel sollte unicode-bidi bei einem <bdi> nicht geändert werden, aber man kann es wie jedes andere Inline-Element gestalten:
bdi {
color: blue;
font-weight: bold;
}Attribute
Das <bdi>-Tag unterstützt die Global Attributes und die Event Attributes.
So gestaltet man ein HTML-<bdi>-Tag
bdi {
color: blue;
font-weight: bold;
}