bdo Texte mit unterschiedlicher Laufrichtung
<html dir="rtl"> <div dir="rtl">
Wenn nur Textpassagen in umgekehrter Laufrichtung gesetzt werden – in hebräischen und arabischen Texten werden z.B. ebenso englische Begriff eingestreut wie in deutschen Texten – ändert bdo (Bidirectional override) die Richtung des Textes von links nach rechts (der Vorgabe) zu rechts nach links und umgekehrt.
Mit dem bdo-Tag kann HTML mehrere Sprachen innerhalb eines Dokuments korrekt darstellen, z.B. Chinesisch, Hebräisch (die von rechts nach links gelesen werden) und Deutsch, Englisch (die von links nach rechts gelesen werden).
انا بحب القهوةفي يوم بارد من الشتاء
Aus einer Email von Amal – جارتي كتبتلي هدي الرسالة – die weiß, warum.
Wenn die Laufrichtung innerhalb eines Textes geändert werden soll, ist eher ein HTML-Tag mit dem dir-Attribut angebracht als das CSS-Äquivalent direction: rtl, denn die Laufrichtung ist kein Vorschlag zur Darstellung (wie z.B. CSS für Schrift und Farbe).
<p dir="rtl" lang="ar">انا بحب القهوةفي يوم بارد من الشتاء</p> <p>Aus einer Email von Amal – <bdo dir="rtl">جارتي كتبتلي هدي الرسالة</bdo> – die weiß, warum.</p>
Kleines Regelwerk für BIDI – Bidirektional
bdo kommt dank des Unicode-Bidirectional-Algorithmus (kurz: Bidi-Algorithmus) gut mit Texten in unterschiedlicher Laufrichtung aus, wenn man ein paar Regeln befolgt.
- Um die Laufrichtung des Textes in einem Dokument komplett auf RTL umzustellen, wird das dir-Attribut im html-Tag benutzt.
- Um in ganzen Blöcken innerhalb des Dokuments die Laufrichtung zu ändern, wird das dir-Attribut für den Block gesetzt.
- Um die Laufrichtung von Inline-Texten umzukehren, wird der Text in bdo-Elemente gepackt.
- dir="ltr" oder dir="rtl" nicht in span-Elementen benutzen, sondern bdo-Elemente setzen.
- dir="auto" für Formularfelder einsetzen.
- Kein CSS zur Änderung der Laufrichtung einsetzen, wenn die Laufrichtung durch HTML-Markup geändert werden kann. Das HTML hält auch noch, wenn das CSS einmal nicht zur Verfügung steht.
HTML bdi
bdi (Bidirectional Isolate) isoliert einen Text, wenn die Laufrichtung des Texts nicht bekannt ist. Das sorgt z.B. dafür, dass Namen immer in ihrer nativen Richtung dargestellt werden.
Amal
<bdo dir="rtl">
انا بحب القهوةفي يوم بارد من الشتاء.<br />
<bdi dir="ltr">Amal</bdi>
</bdo>
HTML bdi wird nicht von IE10 / IE11 und auch nicht von Microsoft Edge unterstützt, nur von Chrome, Firefox und Safari. Also muss dir="ltr" zusätzlich eingesetzt werden, um die geänderte Laufrichtung für alle Browser einzustellen.
