HTML dir: Übersetzungen und Internationalisierung – Laufrichtung
Die vorgegebene Laufrichtung von Text in HTML ist von links nach rechts (LTR). Um eine HTML-Seite oder ganze Blöcke komplett mit Laufrichtung von rechts nach links zu setzen, reicht die Angabe von dir="ltr" im html-Tag. Dabei lassen sich in einem insgesamt von links nach rechts laufendem Text Begriffe wie Eigennamen problemlos von rechts nach links einbetten.
Das HTML dir-Attribut gibt die Richtung des Textes an. Dazu passt das Kernattribut lang, das die verwendete Sprache definiert. Die Angabe der Sprache durch das Attribut lang reicht aber alleine nicht aus, um auch die Richtung des Textflusses zu steuern.
Die folgenden Werte können verwendet werden:
- dir="ltr" ltr (Vorgabe) und setzt den Textfluss von links nach rechts.
- dir="rtl" rtl Textfluss im Browser von rechts nach links.
<html dir="rtl" lang="he"> <body> כאן, מוכנס טקסט שנמשך מימין לשמאל. … </body> </html>
Wenn das dir-Attribut im html-Tag des HTML-Dokuments angegeben ist, wird es auf das gesamte Dokument angewandt. In allen anderen Tags wirkt sich dir ausschließlich auf die Texte innerhalb des jeweiligen Tags aus. Beim <table>-Tag wird die erste Spalte der Tabelle auf der rechten Seite liegen und weitere Spalten werden sich zur linken Seite hin anschließen.
Dieser Text läuft mit dir="rtl" von rechts nach links.
HTML dir funktioniert nicht wie die Ausrichtung durch die CSS-Eigenschaft text-align: Der Punkt liegt auf der linken Seite vor dem Text.
HTML bdo – Text mit unterschiedlicher Laufrichtung
Ein Eigenname wird rechts-nach-links geschrieben, aber דָּוִיד oder أمل ordnet sich in einem deutschen oder englischen Dokument in den LTR-Satzfluss ein. Die Browser verwenden den Unicode Bidirectional Algorithm (UBA). Er sorgt dafür, dass arabische / hebräische Zeichen RTL sind, während lateinischer Text LTR bleibt. Zahlen sind meist LTR.
<html dir="rtl"> <div dir="rtl">
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).
Benutzername: علي (ID: 123)
انا بحب القهوةفي يوم بارد من الشتاء
Aus einer Email von Amal – جارتي كتبتلي هدي الرسالة – die weiß, warum.
Probleme entstehen bei gemischtem Inhalt – dabei ist es nicht der arabische oder hebräische Name, sondern beim Zusammentreffen mit »neutralen« Zeichen (() : -).
Benutzername: דָּוִיד (ID: 123)
<p>Benutzername:<p>Benutzername: <bdi>علיד</bdi> (ID: 123)</p>דָּוִיד (ID: 123)</p>
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. Die RTL-Richtung bleibt erhalten, der restliche Satz bleibt stabil
<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.
