Technische Shortcuts für Right-to-Left-Layouts

Was erledigt HTML von selbst, wo muss manuell nachgebessert werden?

Websites in Right-to-Left-Schriften (RtL) erfordern neben der Umstellung der Schreibrichtung im Code auch eine Spiegelung von Layout-Elementen.
Anpassungen für Absätze, Listen und Tabellen erfolgen über die rtl-Eigenschaft automatisch, andere müssen per Hand vorgenommen werden. Wenn die Website auf einem konsequent angewendeten Grid basiert, lässt sich das Layout über die CSS-Eigenschaft float ganz unkompliziert anpassen.

Das dir-Attribut im HTML-Code oder die CSS-Eigenschaft direction stellen Websites auf RtL-Schriften ein, Standardeinstellung ist in beiden Fällen ltr für „left to right“.

Mit der Laufrichtung des Texts ändern sich bei „right to left“ auch Eigenschaften von Absätzen, Tabellen und Listen: Anstatt left gilt ab sofort right als Standardwert für text-align und die Reihenfolge der Tabellenspalten wird automatisch umgekehrt. Aufzählungszeichen von Listen wandern von links nach rechts, ohne dass dafür Änderungen im Code notwendig werden. Die Reihenfolge einzelner Listenelemente in horizontalen Listen wird von selbst umgestellt.

screenshot-en-729x351-q92
screenshot-ar-731x361-q92

Nebeneinanderstehende div-Elemente werden in ihrer horizontalen Reihenfolge jedoch nicht automatisch gespiegelt. Weil der Website ein Raster aus Zeilen mit darin relativ positionierten div-Elementen zugrunde liegt, reicht der CSS-Befehl float: right aus, um das Layout unkompliziert und ohne zusätzlichen Code zu spiegeln.

Alternativ zur float-Anweisung könnte man bei abweichenden [oder nicht vorhandenen] Rastern auch die Reihenfolge der div-Elemente im HTML-Code vertauschen und absolute oder fixe Positionierungen über CSS verändern. Nachteil daran: Die Elemente werden auf mobilen Endgeräten in der falschen Reihenfolge angezeigt und der Code wird unnötig aufgebläht.

Professionelle internationale Websites, die über ein Content-Management-System erstellt und verwaltet werden, müssen mit demselben schlanken Code sowohl in Left-to-Right-Schriften als auch in Right-to-Left-Schriften funktionieren. Auch unter diesem Aspekt beweisen Grids also ihre konstruktiven Vorteile.

Autor: Anne Koch
Erstellt: 05/05/2015