Visuelle vs. logische Buchstabenreihenfolge

Frage

Was ist der Unterschied zwischen visueller und logischer Buchstabenreihenfolge und welche sollte man verwenden?

Bidirektionaler Text tritt oft in von rechts nach links geschrieben Schriften auf, bspw. in der arabischen, hebräischen, syrischen und Thaana. Eine Vielzahl von Sprachen wird in diesen Schriften geschrieben, unter anderem Arabisch, Dhivehi, Hebräisch, Jiddisch, Paschtunisch, Persisch, Sindhi, Syrisch, Urdu u.a.

In Sprachen, die von rechts nach links geschrieben werden, laufen eingebetteter Text aus einer von links nach rechts geschriebenen Sprache und Zahlen von links nach rechts innerhalb des Textflusses von rechts nach links. Bei der Darstellung von bidirektionalem Text läuft jedweder Text in einer von links nach rechts geschriebenen Schrift sowie alle Zahlen visuell von links nach rechts innerhalb der generellen Schreibrichtung von rechts nach links der zuvor genannten Schriften. (Der deutsche Text auf dieser Seite enthält natürlich auch bidirektionalen Text, wenn er arabische oder hebräische Beispiele einbindet.)

Kurze Antwort

Sie sollten HTML (und jede andere Art von Markup) immer mit logischer Reihenfolge erstellen, niemals die visuelle verwenden.

Die visuelle Reihenfolge von Buchstaben war ein gängiger Weg, hebräische Schrift in HTML in alten Browsern darzustellen, die noch nicht den Unicode-Bidi-Algorithmus unterstützten. Solche sind heutzutage so gut wie gar nicht mehr anzutreffen. Die Buchstaben wurden im Quellcode in der Reihenfolge geschrieben wie sie angezeigt werden, wenn man von links nach rechts schaut.

(Die visuelle Reihenfolge war für arabische Schrift weniger gebräuchlich. Weil arabische Buchstaben verbunden sind, war die Motivation für arabische Entwickler höher, die logische Reihenfolge zu ermöglichen. Arabisch geschriebener Text in visueller Reihenfolge müsste getrennte Zeichencodes für die verschiedenen Formen der Buchstaben verwenden.)

Bei der logischen Reihenfolge werden die Buchstaben in der Reihenfolge im Speicher abgelegt, wie sie normalerweise geschrieben (und gesprochen) werden. Zum Zeitpunkt der Anzeige setzt der Browser den Unicode-Bidi-Algorithmus ein, um die korrekte Darstellung zu erzeugen.

Details

Visuelle Reihenfolge und ihre Schwächen

Die folgende Abbildung zeigt oben in blau den bidirektionalen Text „פעילות הבינאום, W3C“ wie er normalerweise erscheint, wenn er in einem von rechts nach links geschriebenen Absatz steht. Die numerierten Pfeile zeigen die Leserichtung an. Die Textteile werden in der Reihenfolge der Zahlen darunter gelesen.

Die zweite und dritte Zeile (grüner Text) zeigen die Reihenfolge, in der die Zeichen bei logisch bzw. bei visuell codiertem Text im Speicher stehen (von links nach rechts in der Abbildung). Die logische Reihenfolge ist auch jene, mit der man als Autor den Text eingibt. Dasselbe gilt für die Zeile mit visueller Reihenfolge, d.h. Sie geben den Text rückwärts ein (wenn Sie nicht einen Editor haben, der automatisch in logischer Reihenfolge eingegebenen Inhalt in visuelle Reihenfolge umdreht).

Die nächste Abbildung zeigt ein Beispiel für HTML-Quelltext mit visueller Reihenfolge.

Damit visuelle Reihenfolge funktioniert, muss man nicht nur den Text rückwärts schreiben, sondern auch automatischen Zeilenumbruch unterdrücken, Text in Absätzen und Tabellenzellen nach rechts ausrichten, explizit Zeilenumbrüche einfügen und (bei Übersetzungen aus einer Sprache, die eine von links nach rechts geschriebene Schrift verwendet) die Reihenfolge von Tabellenspalten umdrehen. Außerdem muss man bei Links oder Hervorhebungen, die sich über mehrere Zeilen erstrecken, die jeweiligen Bereiche in jeder Zeile getrennt auszeichnen.

(Das wäre noch eine recht saubere Umsetzung. Man könnte auch so etwas wie rechts ausgerichtete Absätze mit <nobr>…</nobr>-Tags um jede Zeile vorfinden. Wenn das Browserfenster zu schmal ist, verschwinden die Zeilenanfänge am rechten Rand.)

Ein großes Problem dabei ist die Wartbarkeit. Neben der Schwierigkeit, hebräisch rückwärts einzugeben, muss man bei visueller Reihenfolge, wenn man ein paar Wörter inmitten eines Absatzes ergänzen möchte, in dieser und allen nachfolgenden Zeilen Textteile von einer Zeile in eine anderen verschieben, um die Zeilenumbrüche neu zu setzen. Außerdem muss man inzeiliges Markup neu arrangieren, wenn es sich (vor oder nach der Textänderung) über mehrere Zeilen erstreckt.

Das Ergebnis ist äußerst fragiler Code, der schwer wartbar ist.

All das zusätzliche, zur Anzeige des Texts notwendige Markup bläht den Quellcode auf und kostet nicht nur Ihre Zeit bei der Entwicklung, sondern auch Bandbreite [bei der Übertragung].

Visuelle Reihenfolge kann auch Probleme auf höherer Ebene verursachen. Sie erfordert bspw., dass die Reihenfolge von Tabellenspalten bei der Übersetzung in eine andere Sprache manuell umgedreht wird. Zeilenumbrüche müssen umgeordnet werden, wenn sich die Geometrie der Seite ändert. Die Suchleisten von Browsern erfassen Texteingaben in logischer Reihenfolge, was zur Folge hat, dass der Suchbegriff nicht auf Texte passt, die in visueller Reihenfolge vorliegen, wenn nicht eine besondere Logik im Browser sich dieses Problems annimmt. Und so weiter und so fort.

Bei logischer Reihenfolge hingegen ist es ein Leichtes, längere Absätze mit Fließtext zu erstellen, der automatisch entsprechend der Breite des Blockelements umbricht. Es ist auch wesentlich einfacher, Barrierefreiheit zu erzielen, z.B. für Screenreader. Man gibt einfach die Buchstaben in der Reihenfolge ein, wie sie gesprochen werden, den Rest erledigt der Unicode-Bidi-Algorithmus.

Umgang mit alten Systemen

Wenn in modernen Systemen noch alte (in Zeiten von Grün-Monitoren erstellte) Daten gespeichert sind, die in visueller Reihenfolge repräsentiert sind (wie bei Großrechnern oder iSeries-Computern), muss man den bidirektionalen Datenfluss zwischen Backend (visuelle Reihenfolge) und Web-Frontend (logische Reihenfolge) sicherstellen.

Dabei spielen neben der Reihenfolge der Zeichen noch verschiedene andere Faktoren eine Rolle, die jedoch den Rahmen dieses Artikels sprengen würden. Sie finden tiefergehende Informationen in dieser hilfreichen E-Mail von Tomer Mahlin (IBM Bidi Development Lab).

Visuelle Reihenfolge und Zeichencodierungen

Wir empfehlen immer, dass Sie UTF-8 als Zeichencodierung Ihrer Seiten verwenden, wobei die logische Reihenfolge der Zeichen gilt. Wenn Sie eine ISO-8859-Codierung wählen (und nur dann), müssen Sie bei der Angabe der Zeichencodierung achtgeben. Die Zeichencodierung des Inhalts wird im HTTP-Header oder in einem meta-Element innerhalb des Dokuments (oder in beidem) angegeben.