rtl-layout-audit

---
name: rtl-layout-audit
description: Audits a web interface for right-to-left layout correctness in Arabic, Hebrew, Persian or Urdu. Use when adding an RTL locale, when the user reports mirrored or broken Arabic layout, or before shipping a bilingual interface.
---

# RTL layout audit

## When to use this
An RTL locale is being added, Arabic or Hebrew layout is reported as broken, or
a bilingual interface is about to ship.

## Procedure
1. Confirm `dir` is set on the html element and derived from the locale, not
   hard-coded.
2. Grep the stylesheet for physical properties and flag every one. The complete
   mapping is in [references/logical-properties.md](references/logical-properties.md).
3. Identify icons that encode direction (arrows, chevrons, undo, send) and
   confirm they mirror. Icons that do NOT encode direction (search, user, close,
   play) must **not** mirror.
4. Check that numbers, code, URLs and Latin identifiers stay LTR inside RTL text.
5. Verify line height — Arabic needs more leading than Latin at the same size.

## Rules
- Never mirror with a global `transform: scaleX(-1)`. It reverses text too.
- A translated string is not an RTL implementation. Layout is the work.
- Test with real Arabic content, never with lorem ipsum.

# Physical to logical property map

| Physical | Logical |
| --- | --- |
| margin-left / margin-right | margin-inline-start / margin-inline-end |
| padding-left / padding-right | padding-inline-start / padding-inline-end |
| left / right | inset-inline-start / inset-inline-end |
| border-left / border-right | border-inline-start / border-inline-end |
| text-align: left / right | text-align: start / end |
| float: left / right | float: inline-start / inline-end |

Keep physical properties only where the meaning is genuinely physical — a
drop shadow offset, or a decorative element anchored to a viewport edge.