<bdi> HTML bidirektionales Isolat-Element

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 von links nach rechts (LTR) als auch Zeichenfolgen, die von rechts nach links (RTL) angeordnet sind, wie z. B. ein arabisches Zitat in einem englischen Satz. Browser implementieren den Unicode-Bidirektional-Algorithmus, um damit umzugehen. In diesem Algorithmus erhalten Zeichen eine implizite Richtung: Zum Beispiel werden lateinische Zeichen als LTR und arabische Zeichen als RTL behandelt. Einige andere Zeichen (wie Leerzeichen und einige Satzzeichen) werden als neutral behandelt und basierend auf den umgebenden Zeichen mit einer Richtung versehen.

Normalerweise macht der bidirektionale Algorithmus das Richtige, ohne dass der Autor spezielles Markup bereitstellen muss, aber gelegentlich benötigt der Algorithmus Unterstützung. An dieser Stelle kommt <bdi> zum Einsatz.

Das <bdi>-Element wird verwendet, um einen Textbereich zu umschließen und den bidirektionalen Algorithmus anzuweisen, diesen Text isoliert von seiner Umgebung zu behandeln. Dies funktioniert auf zwei Arten:

• Die Richtung des in <bdi> eingebetteten Textes beeinflusst nicht die Richtung des umgebenden Textes.
• Die Richtung des in <bdi> eingebetteten Textes wird nicht von der Richtung des umgebenden Textes beeinflusst.

Betrachten Sie zum Beispiel 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 (weil es aus neutralen und schwachen Zeichen besteht). Das Ergebnis wird durcheinander sein:

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 einem <span> mit dem dir-Attribut versehen, das auf die bekannte Richtung eingestellt ist. Wenn Sie die Richtung jedoch 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 mit der CSS-Regel unicode-bidi: isolate auf einem <span> oder einem anderen Textformatierungselement erzielt werden kann, sollten HTML-Autoren diesen Ansatz nicht verwenden, da er nicht semantisch ist und Browser die CSS-Stilgestaltung ignorieren dürfen.

Das Einbetten der Zeichen in <span dir="auto"> hat den gleichen 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 sich anders als normal verhält: Es ist standardmäßig auf auto eingestellt, d.h. sein Wert wird nie vom übergeordneten Element geerbt. Das bedeutet, dass, wenn Sie keinen Wert von rtl oder ltr für dir angeben, der Benutzeragent die richtige Richtung basierend auf dem Inhalt des <bdi> ermittelt.

Beispiele

Kein bdi mit nur LTR

Dieses Beispiel listet die Gewinner eines Wettbewerbs nur mit <span>-Elementen auf. Wenn die Namen nur LTR-Text enthalten, sehen die Ergebnisse in Ordnung aus:

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

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 durcheinander sein:

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

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

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 Einbettungskontext zu behandeln, sodass die Beispielausgabe korrekt geordnet ist:

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

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Inline-Markup und bidirektionaler Text in HTML
• Grundlagen des Unicode-Bidirektional-Algorithmus
• Lokalisierung
• Verwandtes HTML-Element: <bdo>
• Verwandte CSS-Eigenschaften: direction, unicode-bidi