HTML `<bdi>`-Tag

Das <bdi>-Tag (bidirektionale Isolierung) ist eines der HTML5-Elemente. Es wird verwendet, um bidirektionalen Text zu isolieren, wenn eine Sprache mit rechts-nach-links-Schreibrichtung (wie Arabisch oder Hebräisch) zusammen mit links-nach-rechts-Sprachen verwendet wird. Beachten Sie, dass das <bdi>-Tag den Text nicht physisch dreht; es isoliert ihn lediglich, damit der bidirektionale Algorithmus des Browsers seine Richtung unabhängig bestimmen kann.

Bidirektionaler Text kann Sequenzen von Zeichen enthalten, die rechts-nach-links (RTL) und Sequenzen von Zeichen, die links-nach-rechts (LTR) angeordnet sind. Um dies zu handhaben, verwenden Browser den Unicode-Bidirektionalitätsalgorithmus, bei dem Zeichen eine bestimmte Schreibrichtung zugewiesen bekommen. Einige Zeichen (z. B. bestimmte Satzzeichen und Leerzeichen) werden als neutral behandelt, und ihre Richtung hängt von der Richtung ihrer benachbarten Zeichen ab.

Im Allgemeinen funktioniert der bidirektionale Algorithmus einwandfrei, und es besteht in der Regel kein Bedarf für spezielles Markup. Manchmal kann der Algorithmus jedoch Unterstützung benötigen. In solchen Fällen wird <bdi> verwendet.

Das <bdi>-Tag umschließt einen Textabschnitt und funktioniert auf folgende Weise:

Die Schreibrichtung von Text innerhalb des <bdi>-Tags beeinflusst nicht die Schreibrichtung des umgebenden Textes.
Die Schreibrichtung des umgebenden Textes beeinflusst nicht die Schreibrichtung von Text innerhalb des <bdi>-Tags.

Das <bdi>-Tag ähnelt dem älteren <bdo>-Tag. Das <bdi>-Element isoliert den enthaltenen Text vom umgebenden Text, während <bdo> lediglich die Richtung umkehrt. Es wird im Allgemeinen empfohlen, <bdi> zu verwenden, um unerwartete Darstellungsprobleme zu vermeiden, die mit <bdo> auftreten können.

Syntax

Das <bdi>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<bdi>) und dem schließenden (</bdi>)-Tag geschrieben.

Beispiel für das HTML `<bdi>`-Tag:

HTML <bdi>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>

Try it Yourself »

Ergebnis

bdi exemple

Attribute

Das <bdi>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <bdi>-Tag

css

bdi {
  color: blue;
  font-weight: bold;
}

Praxis

Wozu dient das HTML <bdi>-Tag?

Das HTML <bdi>-Tag wird verwendet, um einen Textabschnitt zu trennen, der möglicherweise in einer anderen Richtung als sein umgebender Text formatiert ist.Das HTML <bdi>-Tag wird verwendet, um fetten Text in HTML zu erstellen.Das HTML <bdi>-Tag wird verwendet, um einen Zeilenumbruch in HTML-Text darzustellen.Das HTML <bdi>-Tag wird zur Anzeige kulturspezifischer Texte basierend auf dem Unicode-Bidirektionalitätsalgorithmus verwendet.

HTML <bdi>-Tag ​

Syntax ​

Beispiel für das HTML <bdi>-Tag: ​

Ergebnis ​