Die Elemente bdi und bdo

Der Unicode Bidirectional Algorithm verarbeitet Text mit gemischter Schreibrichtung normalerweise gut, aber manchmal müssen Sie ihn überschreiben – etwa um zu verhindern, dass ein vom Benutzer angegebener Name die Richtung des umgebenden Textes ändert, oder um in einem Codeblock eine bestimmte Richtung zu erzwingen.

<bdi> (bidirektionale Isolation) behandelt seinen Inhalt als eigenen bidi-Kontext. Die Textrichtung innerhalb von <bdi> kann die Richtung außerhalb nicht beeinflussen und umgekehrt.

Eine Liste mit englischen und arabischen Namen birgt das Risiko, dass die arabischen Namen ihren RTL-Fluss in den umgebenden Text „übertragen“. Wenn Sie jeden Namen in <bdi> einschließen, wird er isoliert: Das Layout bleibt unabhängig davon konsistent, welche Richtung der jeweilige Name hat.

<bdo dir="rtl"> (bidirektionale Überschreibung) erzwingt eine bestimmte Richtung für seinen Inhalt und überschreibt die natürliche Bidi-Auflösung. Verwenden Sie es, wenn Sie Text in einer nicht natürlichen Richtung anzeigen möchten – zum Beispiel, um Codeausschnitte innerhalb einer RTL-Seite in LTR darzustellen.

Das dir-Attribut bei einem normalen Element legt eine Grundrichtung fest, während der bidi-Algorithmus innerhalb des Elements weiterhin angewendet wird. <bdo> deaktiviert den bidi-Algorithmus für seinen Inhalt – jedes Zeichen fließt unabhängig von seinem Schriftsystem strikt in die angegebene Richtung.

Immer wenn Sie von Benutzern erzeugten Text in umgebende Elemente der Benutzeroberfläche einbetten – etwa Namen in Chat-Kopfzeilen, Benutzernamen in Kommentaren oder Titel in Feed-Einträgen. Die Isolation stellt sicher, dass das Layout der Benutzeroberfläche nicht davon beeinflusst wird, was der Benutzer eingegeben hat.

Selten. Der wichtigste legitime Anwendungsfall besteht darin, bidirektionalen Text zu erklären (also zu zeigen, wie eine Zeichenfolge umgekehrt aussieht) oder fehlerhaft ausgezeichnete Daten zu korrigieren, bei denen die natürliche Bidi-Auflösung zu einer falschen visuellen Reihenfolge führt.

Bei Benutzerinhalten mit unbekannter Schreibrichtung kombinieren Sie <bdi dir="auto"> für doppelte Sicherheit: Die automatische Erkennung bestimmt anhand des Inhalts eine Grundrichtung, und bdi verhindert, dass diese Richtung in den umgebenden Text übergreift.

bdi und bdo werden von allen modernen Browsern unterstützt. Sie sind Bestandteil von HTML5 und seit Jahren stabil. Ältere IE-Versionen unterstützen bdi nicht, sind aber funktional veraltet; moderne Websites können bdi problemlos verwenden.

Screenreader berücksichtigen die Bidi-Isolierung: Text innerhalb von <bdi> wird in seiner eigenen Sprachstimme ausgegeben (wenn lang gesetzt ist), ohne dass der umgebende Kontext einfließt. bdi hilft der Sprachausgabe außerdem dabei, passende Pausen um isolierte Ausdrücke zu erzeugen.

Templates mit Platzhaltern ("Willkommen, {name}") sollten den Platzhalter in <bdi> einschließen: Welcome, <bdi>{name}</bdi>. Jeder Benutzername – ob englisch, arabisch oder gemischt – wird korrekt dargestellt, ohne den restlichen Begrüßungstext zu beeinflussen.

Was ist der praktische Unterschied zwischen und ?

bdi isoliert die Schreibrichtung eines Textabschnitts von seiner Umgebung – verwenden Sie es für eingebettete Benutzerinhalte wie Namen in Templates. bdo erzwingt eine bestimmte Richtung und überschreibt damit die Bidi-Auflösung; außerhalb von Lehrbeispielen wird es nur selten benötigt. Kombinieren Sie bdi mit dir="auto", um von Benutzern bereitgestellten Text in unbekannten Sprachen sicher zu verarbeiten.