2026-06-03 · Redaktion Baduno · 6 blog.readMin · Blog & Wissen
RTL-Design: Was sich ändert, wenn die Leserichtung kippt
Arabisch und Hebräisch lesen von rechts nach links – und stellen damit stillschweigende Design-Annahmen auf den Kopf. Ein Praxisbericht aus unserem Design-System.
Mehr als gespiegelt
Der naive Ansatz – ‚einfach alles spiegeln' – scheitert schnell: Zahlen und lateinische Markennamen bleiben links-nach-rechts, Medien-Player-Symbole behalten ihre Richtung, Telefonnummern brechen. RTL-Design heißt, für jedes Element zu entscheiden, ob es logisch (der Leserichtung folgend) oder physisch (richtungsfest) ist.
CSS: logische Eigenschaften
Moderne CSS-Logik macht RTL beherrschbar: margin-inline-start statt margin-left, inset-inline-end statt right, text-align:start statt left. Wer von Anfang an logisch schreibt, bekommt die zweite Leserichtung fast geschenkt – wer nachrüstet, kämpft mit hunderten Ausnahmen. Diese Website nutzt durchgehend logische Eigenschaften; jede RTL-Fassung entsteht aus demselben Stylesheet wie die deutsche.
Typografie und Dichte
Arabische Schrift hat keine Großbuchstaben, andere Ober-/Unterlängen und wirkt bei gleicher Schriftgröße kleiner und dichter. Gute RTL-Typografie braucht eigene, spezialisierte Fonts, oft ein bis zwei Punkt größere Grade und großzügigere Zeilenhöhe. Auch Letterspacing-Effekte, im Lateinischen beliebt, funktionieren mit verbundener Schrift nicht.
Testen mit Muttersprachlern
Kein Automatismus ersetzt den Blick einer Person, die in der Schrift lebt: Zeilenumbrüche in Komposita, Zahlen im Fließtext, gemischte Richtungen in Formularen – die Fehlerklassen sind subtil. Unser Prüfprozess beinhaltet deshalb immer ein visuelles RTL-Review, nicht nur Textkorrektur.
Navigation: Wo die Logik kippt
In RTL-Umgebungen müssen Navigationsstrukturen neu gedacht werden. Ein horizontaler Menübalken beginnt rechts, der erste Menüpunkt ist der äußerste linke – die Reihenfolge bleibt logisch von rechts nach links. Dropdown-Menüs öffnen sich standardmäßig nach links unten statt rechts unten, da der Ankerpunkt auf der rechten Seite liegt. Seitenleisten, die im LTR-Layout links positioniert sind, rücken im RTL-Fall nach rechts. Besondere Vorsicht gilt bei Hamburger-Menüs: Das Icon selbst (drei horizontale Linien) ist richtungsneutral, aber seine Platzierung (oben links vs. oben rechts) muss getauscht werden. Ein häufiger Fehler sind Untermenüs, die noch LTR-Richtung zeigen, weil sie nicht über logische CSS-Eigenschaften gesteuert werden. In unserem Design-System definieren wir Navigationskomponenten daher komplett mit inset-inline-start/end, sodass sie automatisch zwischen LTR und RTL wechseln. Praktisches Beispiel: Eine Breadcrumb-Navigation zeigt im RTL-Modus die aktuelle Seite links und die Startseite rechts – die Trennpfeile müssen ihre Richtung ebenfalls ändern. Wir setzen hier auf CSS-content mit eingebetteten Pfeilen, die je nach dir-Wert eine andere Entity verwenden.
Gemischte Richtungen: Zahlen und Zeichen
Zahlen, Telefonnummern, E-Mail-Adressen und lateinische Markennamen behalten ihre LTR-Ausrichtung bei, auch wenn der umgebende Text RTL ist. Das führt zu sogenannten bidirektionalen Abschnitten, in denen die Leserichtung mitten im Satz umschlägt. Standardmäßig behandelt der Unicode-Bidirektionalalgorithmus (Bidi) solche Mischtexte, aber Sie müssen sicherstellen, dass die Richtungsweiche korrekt ist. Verwenden Sie das dir-Attribut auf der Ebene des gemischten Elements oder nutzen Sie Zeichen wie das LRM (Left-to-Right Mark) und RLM (Right-to-Left Mark). Beispiel: In einem hebräischen Satz „Telefon: 01234 56789“ muss die Zahlenfolge von links nach rechts gelesen werden. Ohne korrekte Auszeichnung könnte der Browser die Zeichenfolge umbrechen oder falsch darstellen. In Formularen ist es essenziell, dass Label rechts und Input links stehen, da der Nutzer rechts beginnt zu lesen. Unser Vorgehen: Für jedes Textelement mit eingebettetem lateinischem Material setzen wir im RTL-Template einen <span dir="ltr">-Wrapper mit einem abschließenden LRM, damit das folgende RTL-Zeichen korrekt ans Ende rückt.
Arabisch und Hebräisch lesen von rechts nach links – und stellen damit stillschweigende Design-Annahmen auf den Kopf. Ein Praxisbericht aus unserem Design-System.
Symbole: Richtungsfest oder logisch?
Icons und Piktogramme tragen oft implizite Richtungen: Vorwärts-Pfeile zeigen nach rechts, Rückwärts-Pfeile nach links. Diese müssen in RTL-Oberflächen gespiegelt werden, sonst wirkt die Navigation kontraintuitiv. Allerdings sind nicht alle Symbole richtungsabhängig: Ein Play-Dreieck bleibt immer gleich (weil es eine physikalische Aktion darstellt), ein E-Mail- oder Telefon-Symbol ebenso. Die Faustregel: Logische Richtung (zeitlicher Ablauf, Leserichtung, Navigationsrichtung) muss gespiegelt werden; physikalische oder symbolische Bedeutung nicht. In Entwicklung verwenden wir CSS-Transformationen für Icons: scaleX(-1) für alle richtungslogischen SVGs, gesteuert durch eine Klasse [dir=rtl] .icon--directional. So vermeiden wir doppelte Assets. Achtung: Carousel-Pfeile, die nach rechts zeigen, müssen im RTL-Modus nach links zeigen, da die „nächste“ Seite nun links liegt. Gleiches gilt für Progress-Balken: Der Fortschritt sollte von rechts nach links zunehmen. In unserem Design-System sind solche Komponenten mit logischen Eigenschaften (inline-size statt width) implementiert, sodass der Füllstand automatisch an den Start des Fortschrittsbalkens bindet.
Bilder: Was spiegeln, was neu zeichnen?
Grafiken und Illustrationen enthalten oft kulturelle oder richtungsabhängige Symbole: Uhren, die im Uhrzeigersinn laufen (im RTL-Kontext wirkt das gespiegelt normal), Händedrucke, Zeitstrahlen. Nicht jedes Bild muss komplett gespiegelt werden – eine gespiegelte Uhrzeiger-Bewegung könnte als falsch empfunden werden, da die physikalische Realität erhalten bleibt. Aber ein Zeitstrahl von links nach rechts sollte im RTL-Kontext von rechts nach links verlaufen. Logos und Markenbilder bleiben meist unvergelt, da sie einem festen Erscheinungsbild unterliegen. Die Herausforderung besteht darin, die richtigen Bilder automatisch auszuliefern. Wir speichern für jede Grafik ein RTL-Äquivalent als separates Asset oder nutzen CSS-Transformationen für einfache Fälle. In komplexen Szenarien (z. B. Infografiken mit Text) ist eine manuelle Neugestaltung erforderlich. Unser Workflow: Der Grafikdesigner kennzeichnet jedes Bild als „richtungsfrei“, „spiegelbar“ oder „individuell“ im CMS. Die Auslieferung erfolgt über eine Bedingung, die das dir-Attribut des übergeordneten Elements ausliest. Beispiel: Eine Abbildung eines Bücherregals mit Büchern in lateinischer Schrift müsste gespiegelt werden, damit die Buchrücken rechts wirken – das mag auf den ersten Blick überraschend sein, ist aber konsistent.
SEO und hreflang: RTL-spezifische Auszeichnung
Für Suchmaschinen ist die korrekte Sprach- und Richtungsauszeichnung essenziell. Neben dem Sprachattribut (lang) muss das dir-Attribut auf jeder Seite gesetzt sein, damit der Browser und die Suchmaschine die Leserichtung korrekt interpretieren. Bei mehrsprachigen RTL-Seiten ist die hreflang-Auszeichnung besonders kritisch: Eine arabische Seite (ar) muss korrekt auf ihre deutsche oder englische Gegenstücke verweisen. Fehlerhafte hreflang-Einträge führen zu falschen Indexierungen, da Google die Leserichtung nicht automatisch ableitet. Zudem sollten Sie separate Sitemaps für LTR- und RTL-Versionen erwägen, um Signale zu verstärken. Ein häufiger Fehler ist die Verwendung von generischen Tags ohne Berücksichtigung der Schriftrichtung. Wir setzen auf eine dynamische hreflang-Generierung, die aus der Sprachdatenbank sowohl die Sprach- als auch die Regionscodes ableitet. Für arabische Dialekte ist die regionale Differenzierung notwendig, da Verbraucher und Algorithmen unterschiedliche Erwartungen haben. Zusätzlich verwenden wir das canonical-Tag, um Inkonsistenzen zwischen gespiegelten und nicht gespiegelten Inhalten zu vermeiden. Unser Workflow prüft automatisch, ob das dir-Attribut im HTML-Header mit den hreflang-Angaben konsistent ist. Denn ein arabischer Text ohne dir="rtl" kann von Browsern falsch dargestellt werden, was wiederum die Absprungrate erhöht. Die SEO-Leistung wird also nicht nur durch Texte, sondern auch durch die korrekte Auszeichnung der Leserichtung beeinflusst.
Barrierefreiheit: RTL-Herausforderungen für assistive Technologien
Die Bedürfnisse von Screenreadern und anderen assistiven Technologien ändern sich mit der Leserichtung. Screenreader wie JAWS oder VoiceOver erwarten das dir-Attribut, um die richtige Vorlesereihenfolge zu bestimmen. Fehlt diese Angabe, lesen sie gemischtsprachige Inhalte unter Umständen in der falschen Reihenfolge. Auch die ARIA-Landmarks bleiben zwar gleich, aber die Position im DOM sollte idealerweise der Leserichtung folgen: Das Hauptmenü sollte im Quellcode vor dem Hauptinhalt stehen – bei RTL bedeutet das rechte Seite zuerst. Ein weiterer Punkt sind Fokusreihenfolgen: Tab-Indizes müssen in RTL-Seiten logisch von rechts nach links verlaufen. Verwenden Sie native HTML-Elemente, die die Tastaturnavigation automatisch anpassen. Die Alt-Texte von Bildern sollten sprachspezifisch sein und die Perspektive der Zielkultur widerspiegeln. Beispiel: Eine Grafik, die einen Händedruck zeigt, sollte im Arabischen als „zwei Hände, die sich kreuzen“ beschrieben werden, da die kulturelle Konnotation anders ist. Wir empfehlen, barrierefreie Accessibility-Audits sowohl in LTR- als auch in RTL-Ansicht durchzuführen. Dazu gehört die Überprüfung der Kontraste, die unter RTL-Typografie anders ausfallen können. Unser Team nutzt automatisierte Tools in Kombination mit manuellen Tests durch native Sprecher, um sicherzustellen, dass die Benutzererfahrung inklusiv ist.
blog.faqT
Muss ich alle Bilder spiegeln, wenn ich eine RTL-Version erstelle?
Nein. Nur Bilder mit einer klaren Leserichtung wie Zeitstrahlen, Pfeile oder fortlaufende Diagramme sollten gespiegelt werden. Logos, Porträts, Grafiken mit physikalischen Objekten (Uhr, Globus) bleiben unverändert, da sonst die Bedeutung verfälscht wird. Entscheiden Sie fallspezifisch.
Wie teste ich RTL am effizientesten in der Entwicklung?
Nutzen Sie Browser-Entwicklertools, um das dir-Attribut auf dem html-Element auf "rtl" zu setzen, und überprüfen Sie jede Komponente auf korrekte Anordnung. Erweitern Sie Ihren Code-Review-Prozess um einen dedizierten RTL-Check mit Muttersprachlern, der visuelle Irritationen und inkorrekte bidirektionale Textflüsse abdeckt.
