Setzen Sie dir="rtl" auf dem Wurzelelement und ergänzen Sie logische CSS-Eigenschaften: Diese Kombination bildet die verbindliche Grundlage für ein Recht-nach-links-Layout. Markup steuert die Textrichtung, CSS unterstützt lediglich das visuelle Layout, niemals umgekehrt. Wer diese Reihenfolge einhält, vermeidet die häufigsten Rendering-Fehler bei arabischen, hebräischen und persischen Inhalten.
Kurz gesagt:
- Die Verwendung des
dir="rtl"-Attributs auf dem Wurzel-HTML-Element ist essenziell für eine korrekte rechts-nach-links-Auszeichnung, da CSS-Eigenschaften nur das visuelle Layout steuern.- Logische CSS-Eigenschaften wie
margin-inline-startundtext-align: startersetzen physische Werte und erleichtern bidirektionale Layouts ohne separate Stylesheets.- Für Schriftarten im Arabischen und Persischen sind Font-Subsetting und Variable Fonts wichtig, um Ladezeiten zu optimieren und die Dateigröße zu minimieren.
- Hauptnavigation, Breadcrumbs, Pfeile und Icons müssen bei RTL-Inhalten spiegelverkehrt dargestellt werden, während dekorative Elemente unverändert bleiben können.
- Bei gemischtem Text mit englischen Markennamen oder Produktcodes ist gezielte Markierung mittels
bdi,dir="auto"oder Unicode-Steuerzeichen notwendig, um Lesereihenfolge korrekt zu erhalten.
Inhaltsverzeichnis
- Grundprinzipien: dir-Attribut, UBA und bidi-Markup
- CSS-Strategien: Logical Properties statt physischer Werte
- Typografie: Schriftwahl und Ladezeiten für RTL-Scripts
- UI-Spiegelung: Navigation, Icons und Abstände
- Gemischte Richtungen im Text: bdi, dir=“auto” und Unicode-Controls
- Testen und QA-Checkliste für RTL-Rollouts
- Praxisbeispiel und Workflow: vom Markup zum DTP
- Wie UnaLingua Sie bei RTL-Lokalisierung und DTP unterstützt
- FAQ
- Quellen
Grundprinzipien: dir-Attribut, UBA und bidi-Markup
Die W3C-Richtlinie zum dir-Attribut legt fest, dass dir="rtl" auf dem html-Element die empfohlene, dokumentstrukturverändernde Methode ist, um eine Seite als rechts-nach-links auszuzeichnen. CSS-Eigenschaften wie direction: rtl ersetzen dieses Markup nicht zuverlässig, denn sie wirken nur auf die Darstellung, nicht auf die semantische Struktur des Dokuments. Screenreader und andere assistive Technologien lesen das Attribut, nicht das Stylesheet.
Der Unicode Bidirectional Algorithm bestimmt, in welcher Reihenfolge einzelne Textabschnitte innerhalb einer Zeile erscheinen. Er löst die Anordnung von Zeichen und Wörtern, aber nicht die Platzierung von Navigationselementen, Icons oder Layout-Blöcken, dafür bleibt der Entwickler zuständig.
Für Sonderfälle gibt es gezielte Werkzeuge:
bdiisoliert einen Textabschnitt unbekannter Richtung, etwa einen Nutzernamen in einer RTL-Umgebung.bdoerzwingt eine Richtung ausdrücklich, unabhängig vom Inhalt.dir="auto"bestimmt die Richtung automatisch anhand des ersten stark richtungsbestimmenden Zeichens.
CSS-Strategien: Logical Properties statt physischer Werte
Logische CSS-Eigenschaften lösen ein Problem, das physische Werte wie margin-left strukturell nicht lösen können: Sie passen sich der Textrichtung automatisch an. Statt margin-left und margin-right zu pflegen, genügt eine Regel:
margin-inline-startundmargin-inline-endersetzenmargin-left/margin-right.inset-inline-startübernimmt die Funktion vonleftbei positionierten Elementen.text-align: startersetzttext-align: leftund kehrt sich automatisch um.
Eine praktische Analyse zu Tailwind Logical Properties zeigt, dass Utility-Klassen wie ms-4 (margin-inline-start) oder ps-2 (padding-inline-start) bidirektionale Layouts ohne separate RTL-Stylesheets ermöglichen und den Wartungsaufwand gegenüber doppelt gepflegtem CSS deutlich senken.
Profi-Tipp: Migrieren Sie physische Eigenschaften schrittweise auf logische Pendants, Komponente für Komponente, statt das gesamte Stylesheet in einem Schritt umzuschreiben.
Typografie: Schriftwahl und Ladezeiten für RTL-Scripts
Die W3C-Richtlinien zu Arabisch- und Persisch-Layouts beschreiben typografische Besonderheiten wie Zeilenumbruch, Ausrichtung und Schriftstile, die sich von lateinischen Layouts deutlich unterscheiden. Naskh-Schriften eignen sich für Fließtext und Benutzeroberflächen, weil ihre Formen klarer und für Bildschirme besser lesbar sind. Nasta’liq dagegen verlangt komplexe Ligaturen und eine aufwendigere Rendering-Pipeline, weshalb sie vor allem in literarischen oder kalligrafischen Kontexten eingesetzt wird, selten in Interfaces.
Arabische Schriftfamilien enthalten oft deutlich mehr Glyphen als lateinische, das treibt die Dateigröße von Webfonts nach oben. Dagegen helfen zwei Maßnahmen:
- Subsetting reduziert den Font auf tatsächlich benötigte Zeichen.
- Variable Fonts bündeln mehrere Schriftschnitte in einer Datei und sparen zusätzliche Requests.
Ein solider Fallback-Stack mit systemeigenen arabischen oder hebräischen Schriften verhindert, dass Nutzer während des Ladens unlesbaren Text sehen. Mehr zu diesen Feinheiten im DTP-Kontext finden Sie im Beitrag zur arabischen Schrift im Desktop-Publishing.
UI-Spiegelung: Navigation, Icons und Abstände
Nicht jedes Element dreht sich automatisch mit der Textrichtung, bestimmte Komponenten müssen Sie bewusst spiegeln:
- Die Hauptnavigation und Breadcrumbs wechseln die Leserichtung, der erste Menüpunkt steht rechts.
- Zeitachsen und Fortschrittsanzeigen laufen von rechts nach links, sonst wirkt die Chronologie verkehrt.
- Icons mit Richtungsbedeutung, etwa Pfeile oder Wiedergabesymbole, werden horizontal gespiegelt, rein dekorative Icons wie ein Logo bleiben unverändert.
CSS-Pattern wie border-start-start-radius statt border-top-left-radius oder logische Float-Werte übernehmen die Spiegelung automatisch, sofern das Layout konsequent auf logischen Eigenschaften aufbaut. Animationen und Mikrointeraktionen, etwa ein Einblenden von links, wirken in RTL-Kontexten oft gegenläufig und sollten separat geprüft werden, eine reine Spiegelung der CSS-Werte reicht dafür meist nicht aus.
Gemischte Richtungen im Text: bdi, dir=“auto” und Unicode-Controls
Englische Markennamen, Produktcodes oder E-Mail-Adressen innerhalb eines RTL-Satzes benötigen gezielte Auszeichnung, sonst verschiebt sich die Lesereihenfolge sichtbar. Das W3C-Tutorial zu RTL-Schriften empfiehlt für solche Fälle bdi oder dir="auto", je nach Kontext.
- Wickeln Sie eine kurze eingebettete LTR-Phrase eng in ein
spanmit explizitemdir="ltr", statt die Richtung dem Algorithmus zu überlassen. - Nutzen Sie
bdi, wenn der Inhalt dynamisch, zum Beispiel aus Nutzereingaben, stammt und seine Richtung unbekannt ist. dir="auto"genügt bei einzelnen Textblöcken, deren erstes Zeichen die Richtung zuverlässig anzeigt.- Unicode-Steuerzeichen wie RLM oder LRM helfen, wenn eine Auszeichnung mit HTML-Elementen nicht möglich ist, etwa in reinem Text ohne Markup.
Diese Anleitung zu Inline-Markup und bidirektionalem Text bestätigt, dass CSS-Eigenschaften für bidi-Styling kein Ersatz für dediziertes Markup sind, die Richtung bleibt eine Aufgabe der Dokumentstruktur.
Testen und QA-Checkliste für RTL-Rollouts
Ein Rollout ohne strukturierte Prüfung produziert fast immer unsichtbare Fehler, die erst bei echten arabischen oder hebräischen Inhalten auffallen.
- Deaktivieren Sie temporär das CSS und prüfen Sie, ob die Leserichtung allein durch das Markup korrekt bleibt.
- Testen Sie die Browser-Matrix, inklusive Webfont-Rendering auf mobilen Geräten und Desktop.
- Führen Sie ein linguistisches Review mit Muttersprachlern durch, technische Korrektheit allein genügt nicht.
- Prüfen Sie Tastaturnavigation und Screenreader-Verhalten gesondert für die RTL-Ansicht.
- Kontrollieren Sie die Scrollbar-Position und das Verhalten von Karussells oder Swipe-Gesten.
| Prüfbereich | Worauf Sie achten |
|---|---|
| Markup-Robustheit | Leserichtung ohne CSS korrekt |
| Rendering | Webfonts auf allen Breakpoints vollständig geladen |
| Sprache | Muttersprachliches Review der Inhalte |
| Barrierefreiheit | Screenreader- und Tastaturverhalten in RTL |
Eine ausführlichere Vorgehensweise für den gesamten Lokalisierungsprozess finden Sie im Beitrag Lokalisierung testen.
Praxisbeispiel und Workflow: vom Markup zum DTP
Ein Minimalgerüst für eine RTL-Seite kombiniert das Wurzelattribut mit logischen Eigenschaften: mehrsprachige Website technisch umsetzen, html erhält dir="rtl", Abstände werden mit margin-inline-start statt margin-left definiert, und Positionierungen nutzen inset-inline-start. Produktionsreife Snippets hängen vom jeweiligen Projekt ab und sollten vor dem Einsatz technisch geprüft werden.
Bei mehrsprachigen Druck- und Digitalprojekten mit arabischer oder hebräischer Schrift endet die technische Arbeit nicht im Code. Beim Übergang in Desktop-Publishing-Werkzeuge treffen Übersetzung und Layout aufeinander, Ligaturen, Kashida-Dehnung und Nasta’liq-Shaping erfordern eine enge Abstimmung zwischen Übersetzer und DTP-Spezialist.
Typografische Feinheiten wie Ligaturen und Schriftzug-Dehnung entscheiden bei RTL-Dokumenten oft über die Lesbarkeit, nicht nur über die Optik.
Mehr zum praktischen Ablauf solcher Übergaben beschreibt der Beitrag zum Desktop-Publishing für multilinguale Projekte.
Wie UnaLingua Sie bei RTL-Lokalisierung und DTP unterstützt
Ein technisch korrektes Recht-nach-links-Layout ist die eine Hälfte der Arbeit. Die andere ist die inhaltliche und typografische Umsetzung in der Zielsprache. Der Anbieter übernimmt dafür die Website-Lokalisierung und das multilinguale Desktop-Publishing: von der Analyse der bestehenden Struktur über Musterlokalisierung und Korrekturschleifen bis zur Finallieferung geprüfter Inhalte und Dateien. So vermeiden Sie den Bruch zwischen Code und Satz, der bei RTL-Projekten am häufigsten zu Nachbesserungen führt. Details zu den Leistungen finden Sie auf der Seite zur Website- und Software-Lokalisierung.
FAQ
Wo schreibt man von rechts nach links?
Rechts-nach-links-Schrift wird vor allem im arabischen und hebräischen Sprachraum verwendet, etwa in Ländern des Nahen Ostens und Nordafrikas sowie in Israel. Auch Persisch und Urdu, die das arabische Schriftsystem nutzen, folgen dieser Leserichtung.
Welche Schriftarten werden von rechts nach links geschrieben?
Zu den bekanntesten rechts-nach-links-Schriftsystemen zählen Arabisch, Hebräisch und das für Persisch und Urdu verwendete Schriftsystem auf arabischer Basis. Innerhalb des arabischen Schriftsystems unterscheiden sich Stile wie Naskh und Nasta’liq deutlich in Form und technischem Rendering-Aufwand.
In welchen Sprachen wird von rechts nach links geschrieben?
Arabisch, Hebräisch, Persisch und Urdu gehören zu den meistgesprochenen Sprachen mit rechts-nach-links-Schrift. Für Websites in diesen Sprachen ist eine korrekte technische Umsetzung mit dir-Attribut und logischen CSS-Eigenschaften, wie im Abschnitt zu den Grundprinzipien beschrieben, notwendig, damit Layout und Lesefluss stimmen.