RTL-Unterstützung für Ihre Website: Arabisch, Hebräisch und mehr (2026)
Arabisch und Hebräisch repräsentieren zusammen Hunderte Millionen Internetnutzer. Rechts-nach-links-Unterstützung hinzuzufügen ist eine der wirkungsvollsten Internationalisierungsentscheidungen, die ein Web-Team treffen kann — und ist einfacher umsetzbar, als die meisten Entwickler erwarten.
Was RTL für die Webentwicklung bedeutet
Der grundlegende Mechanismus für RTL in HTML ist das dir-Attribut. Wird dir="rtl" auf dem <html>-Element gesetzt, weist das den Browser an, das gesamte Dokument von rechts nach links darzustellen.
In der Praxis ändert das mehrere Browserverhaltensweisen gleichzeitig:
- →Textausrichtung ist standardmäßig rechts statt links.
- →Flex-Richtung wird gespiegelt — Elemente, die in LTR von links nach rechts fließen, fließen nun von rechts nach links.
- →Margin und Padding mit physischen Werten flippen nicht — nur die logischen Entsprechungen tun das.
- →Scrollposition beginnt am rechten Rand.
Zu den Sprachen, die RTL-Darstellung benötigen, gehören: Arabisch, Hebräisch, Persisch (Farsi), Urdu und Kurdisch (Sorani). Thaana (Maledivisch) und einige weitere Schriften sind ebenfalls RTL, haben aber ein deutlich kleineres Web-Publikum.
Die zwei Ansätze: logisches vs. physisches CSS
CSS bietet zwei Möglichkeiten, Abstände und Ausrichtung auszudrücken: physisch (an Bildschirmkanten gebunden) und logisch (an die Textrichtung gebunden). Dieses Verständnis ist der Kern der RTL-Entwicklung.
| Physische Eigenschaft | Logische Entsprechung | RTL-Verhalten |
|---|---|---|
margin-left | margin-inline-start | Flippt in RTL nach rechts |
margin-right | margin-inline-end | Flippt in RTL nach links |
padding-left | padding-inline-start | Flippt in RTL nach rechts |
padding-right | padding-inline-end | Flippt in RTL nach links |
text-align: left | text-align: start | Richtet in RTL rechts aus |
border-left | border-inline-start | Wandert in RTL nach rechts |
Zum Anzeigen aller Spalten horizontal scrollen.
Tailwind CSS bietet logische Utility-Entsprechungen: ms-* / me-* für margin-inline, ps-* / pe-* für padding-inline und text-start / text-end für die Ausrichtung. Wer diese statt der physischen Entsprechungen nutzt, sorgt dafür, dass sich das Layout in RTL korrekt spiegelt — ganz ohne zusätzliches CSS.
Häufige RTL-Fallstricke
Selbst mit logischen Eigenschaften erfordern mehrere UI-Muster besondere Aufmerksamkeit:
Richtungsabhängige Icons
Icons mit Richtungsbedeutung — Pfeile, Chevrons, Fortschrittsanzeigen, Breadcrumb-Trenner, Play/Vorwärts-Schaltflächen — sollten in RTL gespiegelt werden. Ein nach rechts zeigender Pfeil, der „weiter“ bedeutet, sollte auf Arabisch zu einem nach links zeigenden Pfeil werden. SVG-Icons können mit transform: scaleX(-1) unter einem [dir="rtl"]-Selektor gespiegelt werden. Icons ohne Richtungsbedeutung (ein Häkchen, ein Stern, ein Telefon) sollten nicht gespiegelt werden.
Gemischte arabisch-englische Inhalte (bidirektionaler Text)
Der Unicode-Bidi-Algorithmus behandelt gemischte Schriftinhalte automatisch, kann aber unerwartete Ergebnisse liefern, wenn arabischer und lateinischer Text im selben Absatz erscheinen. Eingebetteter LTR-Inhalt (etwa ein englischer Produktname in einem arabischen Satz) wird vom Browser gehandhabt, aber Satzzeichen neben Text mit gemischter Richtung können an der falschen Position erscheinen. Testen Sie Ihre spezifischen Inhaltsmuster, nicht nur das Layout.
Zahlen sind immer LTR
Auch in einem RTL-Dokument werden Ziffern (1, 2, 3…) immer von links nach rechts dargestellt. Telefonnummern, Preise und Daten folgen innerhalb des RTL-Flusses der LTR-Reihenfolge. Arabisch-indische Ziffern (٠١٢٣٤٥٦٧٨٩) sind eine Ausnahme, die in manchen regionalen Kontexten genutzt wird, aber westliche arabische Ziffern in RTL-Text sind immer von links nach rechts.
Codeblöcke sollten LTR bleiben
Code, Terminalausgaben und Programmiersyntax müssen unabhängig von der umgebenden Dokumentrichtung immer LTR dargestellt werden. Wenden Sie dir="ltr" explizit auf <pre>- und <code>-Elemente an oder nutzen Sie eine CSS-Regel wie [dir="rtl"] code { direction: ltr; }.
So testen Sie RTL lokal
Der schnellste Weg, RTL-Darstellung zu testen, ist direkt in den Browser-DevTools — ohne Sprachwechsel oder Serveränderungen.
- 1Öffnen Sie die DevTools (F12 oder Cmd+Option+I), wählen Sie den Tab Konsole und führen Sie aus:
document.documentElement.dir = "rtl". Die Seite wechselt sofort zu RTL, ohne dass ein Neuladen nötig ist. - 2Alternativ wählen Sie das
<html>-Element im Elemente-Panel aus und fügen dasdir="rtl"-Attribut direkt hinzu. - 3Blättern Sie durch jede Seite und jeden interaktiven Zustand. Achten Sie besonders auf: Navigationsmenüs, Modals und Drawer, Formularlayouts, Tabellen und Komponenten mit absoluter oder fixierter Positionierung.
Sowohl Firefox als auch Chrome stellen RTL korrekt dar und sind für diese Art von Tests zuverlässig. Safari unter macOS eignet sich zusätzlich, um die systemseitige Schriftdarstellung für arabischen Text zu überprüfen.
RTL automatisch an Nutzer ausliefern
Wenn Sie Lingvit zur Übersetzung nutzen, wird der RTL-Layoutwechsel automatisch gehandhabt. Wechselt ein Besucher zu Arabisch, Hebräisch, Persisch oder Urdu, setzt Lingvit:
Wechselt der Besucher zurück zu einer LTR-Sprache, wird dir="ltr" wieder gesetzt. Ihre LTR-Besucher sind davon völlig unberührt — das Attribut wird nur für Nutzer umgeschaltet, die eine RTL-Sprache auswählen.
Für die meisten Websites, die mit logischem CSS und Tailwind-Logik-Utilities gebaut sind, genügt dieser einzige Attributwechsel für ein korrektes RTL-Layout — ganz ohne zusätzliche CSS-Regeln.
Was Sie noch prüfen müssen
Auch mit automatischem RTL-Wechsel flippen manche Muster nicht allein durch den Attributwechsel und brauchen eine explizite Überprüfung:
- ✗Absolut positionierte Elemente — Komponenten mit
left: 0oderright: 0(physisch) flippen nicht. Ersetzen Sie diese durchinset-inline-start/inset-inline-end. - ✗Richtungsabhängige SVG-Icons — Pfeile und Chevrons mit Richtungsbedeutung benötigen explizite
[dir="rtl"]-Spiegelregeln. - ✗CSS-Verläufe und Schatten mit physischer Richtung — z. B. ein Links-nach-rechts-Verlauf, der einen visuellen Leserichtungsindikator erzeugt.
- ✗Drittanbieter-Komponentenbibliotheken — Diagrammbibliotheken, Datumsauswahl und Rich-Text-Editoren haben möglicherweise eigene RTL-Einstellungen, die separat aktiviert werden müssen.
Häufig gestellte Fragen
- Welche Sprachen benötigen RTL?
- Die wichtigsten RTL-Sprachen mit bedeutendem Web-Publikum sind Arabisch, Hebräisch, Persisch (Farsi) und Urdu. Kurdisch Sorani ist ebenfalls RTL. Thaana (Dhivehi/Maledivisch) ist RTL, hat aber eine kleinere Web-Präsenz. Alle anderen weitverbreiteten Sprachen — einschließlich aller europäischen, ostasiatischen und südasiatischen Schriften — sind LTR.
- Beeinflusst der RTL-Wechsel LTR-Besucher?
- Nein. Das dir-Attribut wird nur auf „rtl“ gesetzt, wenn ein Besucher aktiv eine RTL-Sprache auswählt. LTR-Besucher sehen dir=„ltr“ (oder den Standard, der LTR ist). Die Spracheinstellung wird pro Browser-Sitzung gespeichert, sodass es keine Vermischung zwischen Nutzern gibt.
- Wie teste ich RTL auf einer Produktionswebsite, ohne Nutzer zu beeinträchtigen?
- Öffnen Sie die Seite in einem privaten/Inkognito-Fenster, öffnen Sie die DevTools und führen Sie document.documentElement.dir = 'rtl' in der Konsole aus. Dies wirkt sich nur auf Ihre Sitzung aus. Sie können den Lingvit-Sprachumschalter auch in Ihrem eigenen Browser auf Arabisch stellen, um das vollständige Übersetzungs- und RTL-Erlebnis zu sehen.
Weitere Anleitungen
Arabisch und Hebräisch zu Ihrer Website hinzufügen
Lingvit handhabt den RTL-Layoutwechsel automatisch. Keine CSS-Änderungen erforderlich.