<bdi>: Das Bidirektionale Isolations-Element

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 darin 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 kennt.

Probieren Sie es aus

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

html {
  font-family: sans-serif;
}

bdi {
  /* Add your styles here */
}

.name {
  color: red;
}

Bidirektionaler Text ist Text, der sowohl Zeichenfolgen enthalten kann, die links nach rechts (LTR) angeordnet sind, als auch Zeichenfolgen, die rechts nach links (RTL) angeordnet sind, wie beispielsweise ein arabisches Zitat, das in einer englischen Zeichenfolge eingebettet ist. Browser implementieren den Unicode Bidirectional Algorithm, um damit umzugehen. In diesem Algorithmus wird Zeichen eine implizite Richtung zugewiesen: Beispielsweise werden lateinische Zeichen als LTR betrachtet, während arabische Zeichen als RTL betrachtet werden. Einige andere Zeichen (wie Leerzeichen und einige Satzzeichen) werden als neutral behandelt und ihre Richtung wird basierend auf den umgebenden Zeichen zugewiesen.

Normalerweise erledigt der bidirektionale Algorithmus die richtige Aufgabe, ohne dass der Autor spezielles Markup bereitstellen muss. Gelegentlich benötigt der Algorithmus jedoch Unterstützung. Hier kommt <bdi> ins Spiel.

Das <bdi>-Element wird verwendet, um einen Textabschnitt zu umschließen und weist den bidirektionalen Algorithmus an, diesen Text isoliert von seinem Umfeld zu behandeln. Dies funktioniert auf zwei Arten:

  • Die Richtung von Text, der in <bdi> eingebettet ist, beeinflusst nicht die Richtung des umgebenden Textes.
  • Die Richtung von Text, der in <bdi> eingebettet ist, wird nicht von der Richtung des umgebenden Textes beeinflusst.

Betrachten Sie als Beispiel einen Text wie:

EMBEDDED-TEXT - 1st place

Wenn EMBEDDED-TEXT LTR ist, funktioniert das einwandfrei. Aber wenn EMBEDDED-TEXT RTL ist, wird - 1 als RTL-Text behandelt (da es aus neutralen und schwachen Zeichen besteht). Das Ergebnis wird fehlerhaft sein:

1 - EMBEDDED-TEXTst place

Wenn Sie die Richtung von EMBEDDED-TEXT im Voraus kennen, können Sie dieses Problem lösen, indem Sie EMBEDDED-TEXT in ein <span> mit dem dir-Attribut umschließen, das auf die bekannte Richtung eingestellt ist. Aber wenn Sie die Richtung nicht kennen - zum Beispiel, 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 ein <span> oder ein anderes Textformatierungselement erzielt werden kann, sollten HTML-Autoren diesen Ansatz nicht verwenden, da er nicht semantisch ist und Browser CSS-Styling ignorieren dürfen.

Das Einbetten der Zeichen in <span dir="auto"> hat denselben Effekt wie die Verwendung von <bdi>, aber seine Semantik ist weniger eindeutig.

Attribute

Wie alle anderen HTML-Elemente unterstützt dieses Element die globalen Attribute, bis auf das dir-Attribut, das sich anders als normal verhält: Es ist standardmäßig auf auto eingestellt, was bedeutet, dass sein Wert nie vom übergeordneten Element geerbt wird. Das bedeutet, dass der User-Agent die richtige Richtung basierend auf dem Inhalt des <bdi> ermittelt, es sei denn, Sie geben einen Wert von rtl oder ltr für dir an.

Beispiele

Kein bdi nur mit LTR

Dieses Beispiel listet die Gewinner eines Wettbewerbs nur mit <span>-Elementen auf. Wenn die Namen nur LTR-Text enthalten, sieht das Ergebnis einwandfrei aus:

html
<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 nur mit <span>-Elementen auf, und einer der Gewinner hat einen Namen, 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 annehmen, und das Ergebnis wird fehlerhaft sein:

html
<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 mit <bdi>-Elementen auf. Diese Elemente weisen den Browser an, den Namen isoliert von seinem eingebetteten Kontext zu behandeln, sodass die Beispielausgabe richtig geordnet ist:

html
<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phrasierungsinhalt, fühlbarer Inhalt.
Erlaubter Inhalt Phrasierungsinhalt.
Tag-Auslassung Keine, sowohl der Start- als auch der Endtag sind erforderlich.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizite ARIA-Rolle generic
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-bdi-element

Browser-Kompatibilität

Siehe auch