Right-to-left is not a font swap. Direction inverts layout, anchoring and the meaning of left and right, and a design built with physical properties breaks in ways that are invisible until someone reads the page. This skill finds the breakages systematically instead of by chance.
WHEN TO REACH FOR THIS
Use before shipping Arabic, Hebrew, Farsi or Urdu, or when an RTL locale shows overlapping text, mirrored URLs or animations running the wrong way.
---
name: rtl-layout-audit
description: Use before shipping Arabic, Hebrew, Farsi or Urdu, or when an RTL locale shows overlapping text, mirrored URLs or animations running the wrong way.
---
# RTL layout audit
Right-to-left is not a font swap. Direction inverts layout, anchoring and the meaning of left and right, and a design built with physical properties breaks in ways that are invisible until someone reads the page. This skill finds the breakages systematically instead of by chance.
## What you need first
- The site running in an RTL locale
- A browser console
## Method
1. Replace physical properties with logical ones throughout: margin-inline, padding-inline, inset-inline, text-align start and end. This resolves most breakage at once.
2. Isolate every Latin island with unicode-bidi. URLs, code, brand names and version numbers reorder catastrophically otherwise - "https://" commonly renders as "//:https".
3. Audit SVG text anchoring separately. In SVG, direction also redefines what text-anchor start means, so left-anchored labels fly off the canvas. Use unicode-bidi plaintext, which fixes ordering while leaving anchoring alone.
4. Check anything animated by transform. Marquees and carousels do not mirror automatically, and a track built with flex will move the duplicated half, making a seamless loop stutter.
5. Check inputs that must stay LTR - a URL field with the protocol prefix in a separate element will split, putting the two halves at opposite ends of the box.
6. Read the page at 375px as well as desktop. RTL bugs cluster where space is tight.
## What this produces
A defect list grouped by cause - physical properties, missing isolation, SVG anchoring, transform-based animation - each with the specific rule that resolves it.
## Where this goes wrong
- Setting direction rtl on an SVG, which moves every left-anchored label off screen
- Reversing an animation globally, which cancels the alternation on rows that were already reversed
- Assuming a font that supports Arabic is sufficient - letter-spacing alone breaks Arabic joining
---
From the QuQi skill library - https://www.quqi.io/skills/rtl-layout-audit
Free to download · no account, no email
A defect list grouped by cause - physical properties, missing isolation, SVG anchoring, transform-based animation - each with the specific rule that resolves it.