HTML <bdo> Tag
Das HTML <bdo>-Tag erzwingt eine Textrichtung (ltr oder rtl) und überschreibt den bidirektionalen Algorithmus. Lernen Sie das dir-Attribut anhand von RTL/LTR-Beispielen.
Das HTML-Tag <bdo> („bidirectional override") erzwingt eine bestimmte Textrichtung und überschreibt dabei den im Browser integrierten bidirektionalen (Bidi-)Algorithmus. Es ist besonders nützlich, wenn Zeichen in einer fest vorgegebenen Links-nach-rechts- oder Rechts-nach-links-Reihenfolge dargestellt werden müssen, unabhängig von der natürlichen Richtung des jeweiligen Schriftsystems.
Diese Seite erläutert, was die Überschreibung bewirkt, das erforderliche dir-Attribut, praktische RTL- und LTR-Beispiele zum Ausprobieren, das CSS-Äquivalent, die Browserunterstützung sowie Hinweise zur Barrierefreiheit.
Warum die bidirektionale Überschreibung existiert
Standardmäßig verarbeiten Browser gemischten Richtungstext automatisch mithilfe des Unicode-Bidirektionalitätsalgorithmus. Dieser Algorithmus berücksichtigt die inhärente Richtung jedes Zeichens – lateinische Buchstaben fließen von links nach rechts (LTR), während arabische und hebräische Buchstaben von rechts nach links (RTL) fließen – und ordnet sie entsprechend an. In den meisten Fällen ist das genau das gewünschte Verhalten.
<bdo> ist das Ausweichmittel für die seltenen Fälle, in denen die visuelle Reihenfolge erzwungen werden muss, anstatt den Algorithmus entscheiden zu lassen. Es überschreibt die inhärente Richtungseigenschaft jedes darin enthaltenen Zeichens. Dieses Element ist ein bewusstes Low-Level-Werkzeug: Verwenden Sie es nur dann, wenn Sie wirklich eine bestimmte Zeichenreihenfolge benötigen – nicht als allgemeine Methode zur Darstellung fremdsprachiger Texte.
Wenn das Ziel lediglich darin besteht, ein Textstück mit unbekannter Richtung (z. B. einen vom Benutzer angegebenen Namen) zu isolieren, damit es das umgebende Layout nicht stört, verwenden Sie stattdessen <bdi> – es isoliert, ohne zu überschreiben.
Das erforderliche dir-Attribut
Das dir-Attribut ist bei <bdo> erforderlich. Es teilt dem Browser mit, welche Richtung erzwungen werden soll, und akzeptiert zwei Werte:
rtl— Inhalt von rechts nach links darstellen. Verwenden Sie dies für RTL-Schriften wie Arabisch und Hebräisch oder um bei beliebigem Inhalt RTL-Reihenfolge zu erzwingen.ltr— Inhalt von links nach rechts darstellen. Dies ist besonders nützlich, um bei einem Fragment (z. B. einem Code-Schnipsel, einer URL oder einer Zahl) LTR-Reihenfolge zu erzwingen, das sich innerhalb eines RTL-Kontexts wie einem arabischen Absatz befindet.
Anders als das globale dir-Attribut, das nur eine Basisrichtung setzt und dem Bidi-Algorithmus weiterhin erlaubt, Zeichenfolgen entgegengesetzter Richtung umzuordnen, überschreibt dir auf einem <bdo>-Element diesen Algorithmus vollständig.
Syntax
Das <bdo>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<bdo>) und dem schließenden (</bdo>) Tag geschrieben, und dir muss immer angegeben sein:
<bdo dir="rtl">…content…</bdo>RTL-Beispiel (Arabisch)
Hier enthält ein LTR-Absatz einen arabischen Satz. Da dir="rtl" der natürlichen Richtung der arabischen Schrift entspricht, wird der Text korrekt von rechts nach links gelesen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Ergebnis
LTR-Überschreibung in einem RTL-Kontext
Wenn die Basisrichtung RTL ist (hier ein arabischer Absatz), würde der Bidi-Algorithmus normalerweise die Reihenfolge eines LTR-Fragments wie eines Dateipfads oder Produktcodes umkehren. Durch das Einschließen dieses Fragments in <bdo dir="ltr"> wird erzwungen, dass es in der vorgesehenen Links-nach-rechts-Reihenfolge bleibt:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Ergebnis
Das CSS-Äquivalent
Der Effekt von <bdo> lässt sich in CSS durch die Kombination der Eigenschaft direction mit unicode-bidi: bidi-override nachbilden. Tatsächlich ist das HTML-Element in Bezug auf dieses CSS definiert:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}Der entscheidende Teil ist unicode-bidi: bidi-override. Das Setzen von direction allein ändert nur die Basisrichtung (dasselbe, was das dir-Attribut bewirkt); erst bidi-override deaktiviert die automatische Neuanordnung. Wenn Sie das Überschreibungsverhalten auf ein anderes Element als <bdo> anwenden möchten, geben Sie beide Deklarationen selbst an. Bevorzugen Sie umgekehrt das semantische <bdo>-Element, wenn das Markup eine bewusste Richtungsüberschreibung darstellt – so bleibt die Absicht im HTML und ist nicht in einem Stylesheet versteckt.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| dir | ltr | rtl | Erforderlich. Legt die Richtung des Textes fest: von links nach rechts (ltr) oder von rechts nach links (rtl). |
Das <bdo>-Tag unterstützt außerdem globale Attribute und Ereignisattribute.
Browserunterstützung
<bdo> ist Teil des HTML-Standards und wird seit langer Zeit von allen gängigen Browsern unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Für aktuelle Browser ist kein Fallback erforderlich.
Barrierefreiheit
<bdo> ändert nur die visuelle Reihenfolge der Zeichen; es ändert weder die Aussprache noch die logische Lesereihenfolge, die assistiven Technologien zugänglich gemacht wird. Screenreader geben den Text in der zugrunde liegenden logischen (Dokument-)Reihenfolge aus, nicht in der überschriebenen visuellen Reihenfolge.
Aus diesem Grund sollte <bdo> nur in Fällen eingesetzt werden, in denen die visuelle Zeichenreihenfolge wirklich wichtig ist (z. B. um ein Code-Fragment oder einen Bezeichner auf LTR zu fixieren). Für normalen mehrsprachigen Inhalt setzen Sie mit dem globalen dir-Attribut am umgebenden Element eine korrekte Basisrichtung und lassen den Bidi-Algorithmus seine Arbeit tun, oder verwenden Sie <bdi>, um nicht vertrauenswürdigen Text zu isolieren – beide Ansätze bieten Screen-Reader-Benutzern eine genauere Erfahrung als das vollständige Überschreiben der Richtung.