---
name: rtl-layout-audit
description: Nutzen Sie dies vor dem Ausliefern von Arabisch, Hebräisch, Farsi oder Urdu, oder wenn eine RTL-Locale überlappenden Text, gespiegelte URLs oder falsch herum laufende Animationen zeigt.
---

# RTL-Layout-Audit

Rechts-nach-links ist kein Schriftartentausch. Die Schreibrichtung kehrt Layout, Verankerung und die Bedeutung von links und rechts um, und ein mit physischen Eigenschaften gebautes Design bricht auf eine Weise, die unsichtbar bleibt, bis jemand die Seite liest. Diese Skill findet die Brüche systematisch statt zufällig.

## Was Sie vorher brauchen

- Die Website in einer RTL-Locale
- Eine Browser-Konsole

## Methode

1. Ersetzen Sie durchgehend physische Eigenschaften durch logische: margin-inline, padding-inline, inset-inline, text-align start und end. Das löst den Großteil der Brüche auf einen Schlag.
2. Isolieren Sie jede lateinische Insel mit unicode-bidi. URLs, Code, Markennamen und Versionsnummern werden sonst katastrophal umsortiert - "https://" rendert häufig als "//:https".
3. Prüfen Sie die Verankerung von SVG-Text gesondert. Im SVG definiert direction auch neu, was text-anchor start bedeutet, sodass links verankerte Beschriftungen von der Zeichenfläche fliegen. Verwenden Sie unicode-bidi plaintext, das die Reihenfolge korrigiert und die Verankerung unangetastet lässt.
4. Prüfen Sie alles, was per transform animiert wird. Marquees und Karussells spiegeln sich nicht automatisch, und eine mit flex gebaute Spur bewegt die duplizierte Hälfte, wodurch eine nahtlose Schleife stockt.
5. Prüfen Sie Eingabefelder, die LTR bleiben müssen - ein URL-Feld mit dem Protokoll-Präfix in einem separaten Element zerfällt und setzt die beiden Hälften an die entgegengesetzten Enden des Feldes.
6. Lesen Sie die Seite bei 375px ebenso wie auf dem Desktop. RTL-Fehler häufen sich dort, wo der Platz knapp ist.

## Was dabei herauskommt

Eine nach Ursache gruppierte Fehlerliste - physische Eigenschaften, fehlende Isolation, SVG-Verankerung, transform-basierte Animation - jeweils mit der konkreten Regel, die sie behebt.

## Wo es schiefgeht

- direction rtl auf einem SVG setzen, was jede links verankerte Beschriftung aus dem Bild schiebt
- Eine Animation global umkehren, was die Alternierung in Zeilen aufhebt, die bereits umgekehrt waren
- Annehmen, eine Schriftart mit Arabisch-Unterstützung genüge - schon letter-spacing zerstört die arabische Ligaturbildung

---

Aus der QuQi-Skill-Bibliothek - https://www.quqi.io/de/skills/rtl-layout-audit