<bdi>: Das Bidirektionale Isolat-Element

<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;
}

/* stylelint-disable-next-line block-no-empty */
bdi {
}

.name {
  color: red;
}

Bidirektionaler Text ist Text, der sowohl Zeichenfolgen enthalten kann, die von links nach rechts (LTR) als auch von rechts nach links (RTL) angeordnet sind, wie z.B. ein arabisches Zitat eingebettet in einen englischen Satz. Browser implementieren den Unicode Bidirectional Algorithmus, um damit umzugehen. In diesem Algorithmus wird den Zeichen eine implizite Richtung zugewiesen: Zum Beispiel 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 wird der bidirektionale Algorithmus automatisch korrekt arbeiten, ohne dass der Autor spezielles Markup bereitstellen muss. Gelegentlich benötigt der Algorithmus jedoch Unterstützung. Hier kommt <bdi> zum Einsatz.

Das <bdi>-Element wird verwendet, um einen Textbereich zu umschließen und weist den bidirektionalen Algorithmus an, diesen Text in Isolation 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 beeinflusst von der Richtung des umgebenden Textes.

Betrachten Sie beispielsweise folgenden Text:

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:

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 einen <span> mit dem dir-Attribut einwickeln, das auf die bekannte Richtung eingestellt ist. Wenn Sie jedoch 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 mit der CSS-Regel unicode-bidi: isolate auf einem <span> oder einem anderen Textformatierungselement erreicht werden kann, sollten HTML-Autoren diesen Ansatz nicht verwenden, da er nicht semantisch ist und Browser dazu berechtigt sind, CSS-Styling zu ignorieren.

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

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

Dieses Beispiel listet die Gewinner eines Wettbewerbs mit Verwendung von <span>-Elementen auf. 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>

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

Dieses Beispiel listet die Gewinner eines Wettbewerbs mit Verwendung von <span>-Elementen auf, und einer der Gewinner hat einen Namen, der aus RTL-Text besteht. In diesem Fall wird - 1, das aus Zeichen mit neutraler oder schwacher Richtung besteht, die Richtung des RTL-Textes annehmen, und das Ergebnis wird durcheinander:

<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;
}

Dieses Beispiel listet die Gewinner eines Wettbewerbs mit Verwendung von <bdi>-Elementen auf. Diese Elemente weisen den Browser an, den Namen in Isolation 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;
}

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