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

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

Christoph Schäfer · Mai 2015 in Expertise

Der heiße Scheiß von damals

Dieser Artikel gehört zu unserem Frühwerk, das bedeutet: Damals waren die beschriebenen Sachverhalte aktuell, jetzt haben sie wahrscheinlich schon etwas Staub angesetzt.

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.

Schön, dass Sie hier sind!

Auch wir können auf Kekse nicht verzichten! Unsere Website nutzt Cookies. Die schmecken zwar nicht nach Schokolade, sorgen aber für ein gutes Nutzererlebnis. Weitere Informationen finden Sie auf unserer Datenschutz-Seite oder in unserem Impressum.

Wählen Sie Ihre Lieblings-Cookies

Unbedingt erforderliche Cookies

Immer aktiv

Diese Cookies sind zwingend erforderlich, damit unsere Website wie gewünscht funktioniert. Wir speichern zum Beispiel Ihre Cookie-Präferenzen in einem Cookie ;-) Genauso speichern, wenn Sie ein Overlay geschlossen haben. Wichtig zu wissen: Wir speichern keine personenbezogenen Daten in diesen Cookies, sondern nur Werte nach dem Muster 0 oder 1.

Leistungs-Cookies

Darf’s etwas mehr sein? Diese Cookies verwenden wir, um die Leistung unserer Website zu verbessern. Wir setzen Cookies, um zu verstehen wie sich Nutzer über unsere Website bewegen und welche Seiten sie aufrufen. Wir verwenden hierzu Google Analytics und Hotjar.

Cookies für Marketing-Zwecke

Marketing-Cookies nutzen wir, um mit anderen Plattformen zu kommunizieren. Wenn wir Werbung in Sozialen Netzwerken, z. B. bei Facebook oder LinkedIn schalten, helfen sie uns, die richtigen Nutzer zu finden.