CSS, HTML und Javascript mit {stil}

HTML bdi / bdo • Laufrichtung des Texts

HTML bdo bdi Schreibrichtung

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.

<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 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 kein »Vorschlag« zur Darstellung (wie z.B. Schrift und Farbe).

<p dir="rtl" lang="ar">انا بحب القهوةفي يوم بارد من الشتاء</p>
<p>Aus einer Email von Amal – <bdo dir="rtl">جارتي كتبتلي هدي الرسالة</bdo> – die weiß, warum.</p>  

bdo kommt dank des Unicode-Bidirectional-Algorithmus (kurz: Bidi-Algorithmus) gut mit Texten in unerschiedlicher 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-Tags gepackt.
  4. dir="ltr" oder dir="rtl" nicht in span-Elementen benutzen, sondern bdo-Tags setzen.
  5. dir="auto" für Formularfelder einsetzen (neu in HTML5).
  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.

Creating HTML-Pages in Arabic, Hebrew and other Right-to-left Scripts

HTML bdi

bdi (bidirectional isolate) ist ein neues Element in HTML5 und isoliert einen Text, wenn die Laufrichtung des Texts nicht bekannt ist. So sorgt man z.B. dafür, dass Namen immer in ihrer nativen Richtung dargestellt werden.

انا بحب القهوةفي يوم بارد من الشتاء
Amal
<bdo dir="rtl">
    انا بحب القهوةفي يوم بارد من الشتاء.<br />
    <bdi>Amal</bdi>
</bdo>