HTML bdi / bdo • Laufrichtung des Texts

Text / Schrift von rechts nach links und links nach rechts

Die vorgegebene Laufrichtung von Text in HTML ist von links nach rechts. Um eine HTML-Seite oder ganze Blöcke komplett mit Laufrichtung von rechts nach links zu setzen, reicht die Angabe von dir im html-Tag.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

  1. Um die Laufrichtung des Textes in einem Dokument komplett auf RTL umzustellen, wird das dir-Attribut im html-Tag benutzt.
  2. Um in ganzen Blöcken innerhalb des Dokuments die Laufrichtung zu ändern, wird das dir-Attribut für den Block gesetzt.
  3. Um die Laufrichtung von Inline-Texten umzukehren, wird der Text in bdo-Elemente gepackt.
  4. dir="ltr" oder dir="rtl" nicht in span-Elementen benutzen, sondern bdo-Elemente setzen.
  5. dir="auto" für Formularfelder einsetzen.
  6. 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-Seiten in arabischer, hebräischer und anderen von rechts nach links geschriebenen Schriften erstellen (Tutorial)

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.