In internationalen Projekten und überall dort, wo digitale Teilhabe eine wichtige Rolle spielen, geht es nicht nur um Übersetzungen. Ein häufig unterschätzter Aspekt ist die Leserichtung von Texten. Während im Deutschen oder Englischen Texte von links nach rechts (LTR) gelesen werden, nutzen andere Sprachen wie Arabisch oder Hebräisch eine Leserichtung von rechts nach links (RTL).
Damit eine Website in beiden Richtungen korrekt funktioniert, sind Maßnahmen im Bereich Layout, CSS und JavaScript erforderlich. In diesem Artikel werden die wichtigsten Punkte vorgestellt, auf die Entwickler achten sollten.
Allgemeine Settings
Die Leserichtung des HTML-Dokuments wird im <html>-Element definiert.
<!-- left to right -->
<html dir="ltr">
<!-- right-to-left -->
<html dir="rtl">Bei Bedarf kann die Richtung auch für einzelne Elemente überschrieben werden:
<div dir="rtl"></div>Der Browser passt daraufhin automatisch verschiedene Aspekte des Layouts an, beispielsweise:
- Textfluss
- Abstände
- Scrollbar-Verhalten
Viele moderne CSS-Features reagieren auf diese Einstellung. Flexbox-Layouts oder CSS Grid spiegeln sich beispielsweise automatisch korrekt für RTL-Darstellungen. Zahlreiche ältere, richtungsabhängige Eigenschaften tun dies aber nicht und sollten durch logische CSS-Eigenschaften ersetzt werden.
Vergiss left und right – nutze start und end
Kein Rennen beginnt links und kein Film endet rechts – im CSS kann sollte man ebenso wenig davon ausgehen.
Frühe Webstandards wurden stark von westlichen Entwicklern geprägt. Internationalisierung war kein Faktor beim Definieren von CSS-Eigenschaften und so orientierten sich einige Properties lange Zeit ausschließlich an Richtungen wie left und right. Dazu gehören:
- margin
- padding
- text-align
- border
Das Ergebnis ist, dass viele Layouts für mehrsprachige Websites doppelt definiert werden müssen:
.container {
text-align: left;
margin-left: 1rem;
border-right: 1px solid black
}
[dir="rtl"] .container {
text-align: right;
margin-right: 1rem;
margin-left: unset;
border-left: 1px solid black;
border-right: unset;
}Erst in den letzten Jahren wurden richtungsabhängige durch die logischen Eigenschaften start und end ersetzt, die sich an der aktuellen Textrichtung orientieren. Egal ob LTR oder RTL, dieses Layout funktioniert für beide Richtungen:
.container {
text-align: start;
margin-inline-start: 1rem;
border-inline-end: 1px solid black
}Shorthand und absolut positionierte Elemente
Dies gilt ebenso für Shorthand-Eigenschaften und absolut positionierte Elemente. Es ist eine sehr platzsparende, aber leider nicht „logische“ Variante, CSS-Properties zu definieren. Es wird mit top, right, bottom und left gearbeitet:
.container {
position: absolute;
// Positionierung des absoluten Containers
inset: 1rem 1.5rem 1rem 2rem;
padding: 5rem 4rem 3rem 2rem;
}Eine Änderung der Leserichtung bringt die bereits erwähnten Probleme mit sich. Da hilft nur die separate Definition der Eigenschaften für RTL:
[dir="rtl"] .container {
position: absolute;
// weiterhin in der Reihenfolge top, right, bottom, left
inset: 1rem 2rem 1rem 1.5rem;
padding: 5rem 2rem 3rem 4rem;
}Auch hier lassen sich logische Eigenschaften einsetzen, um das Beispiel komprimieren:
.container {
position: absolute;
inset-inline: 2rem 1.5rem;
inset-block: 1rem;
padding-inline: 2rem 4rem;
padding-block: 5rem 3rem;
}Dabei gilt:
- inline → horizontale Achse (abhängig von LTR/RTL), beginnt am Start
- block → vertikale Achse (oben → unten)
Nicht alles kann mit den richtigen Properties automatisiert werden
Viele Punkte lassen sich mit der Wahl der richtigen CSS-Properties lösen, andere benötigen weiterhin separate Anpassungen für RTL und LTR.
Icons
Icons können abhängig vom Kontext eine Richtung implizieren (z. B. Pfeile). In solchen Fällen sollten sie gespiegelt werden.
[dir="rtl"] .arrow-icon {
transform: scaleX(-1);
}☝ Nicht alle Icons müssen gespiegelt werden – bei symmetrischen kann man natürlich darauf verzichten.
Horizontale Verschiebung mit translateX()
Angelehnt an das kartesische Koordinatensystem, bewegen sich durch translateX() positive Werte immer nach rechts und negative nach links. Also heißt es hier auch wieder aufpassen und bei ungewünschten Verhalten Änderungen vornehmen, sonst können schnell Probleme bei Carousels oder Off-Canvas Menüs auftreten:
.container {
transform: translateX(-100px)
}
[dir="rtl"] .container {
transform: translateX(100px)
}
Dementsprechend müssen auch horizontale Animationen für RTL und LTR angepasst werden.
.container {
animation: slide-in-ltr 0.3s ease;
}
.container[dir="rtl"] {
animation: slide-in-rtl 0.3s ease;
}
@keyframes slide-in-ltr {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes slide-in-rtl {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}Anpassungen in JavaScript
Viele Browserfunktionen wie Scrollbars passen sich automatisch an RTL an. Komplexer wird es jedoch bei JavaScript-Interaktionen, etwa beim horizontalen Scrollen. Im RTL-Modus startet der Scrollbereich visuell auf der rechten Seite. Wir würden beim Verändern der scrollLeft-Eigenschaft in die falsche Richtung scrollen.
Ein einfacher Ansatz ist, die Leserichtung der Seite abzufragen und die Scrollbewegung entsprechend anzupassen:
function scrollToNext() {
const isRTL = document.dir === "rtl";
isRTL ? container.scrollLeft -= 200 : container.scrollLeft += 200;
}Fazit
Wer mehrsprachige Websites entwickelt, sollte nicht nur an Übersetzungen denken, sondern auch an unterschiedliche Leserichtungen.
Moderne CSS-Features machen es inzwischen deutlich einfacher, Layouts für LTR und RTL zu entwickeln. Besonders logische Eigenschaften wie margin-inline, inset-inline oder text-align: start helfen dabei, unnötigen Code und doppelte Styles zu vermeiden.
Selbst wenn eine Website aktuell nur eine Sprache unterstützt, lohnt es sich, diese Techniken früh zu berücksichtigen. Anforderungen ändern sich schnell – und ein Layout, das bereits richtungsunabhängig aufgebaut ist, spart später viel Aufwand.
You never know.