Christoph Schäfer · Mai 2015 in Expertise
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.
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.