Sign in Start free

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.

CATEGORY
International SEO
FORMAT
rtl-layout-audit.md
STEPS
6
PRICE
Free - no account
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.

The skill file

rtl-layout-audit.md 
---
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

What you need first

  • The site running in an RTL locale
  • A browser console

Method

  1. 01 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. 02 Isolate every Latin island with unicode-bidi. URLs, code, brand names and version numbers reorder catastrophically otherwise - "https://" commonly renders as "//:https".
  3. 03 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. 04 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. 05 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. 06 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

Use this skill in your own AI

The download is a plain markdown file with the name and trigger in its frontmatter. Where an assistant supports skills it can load itself, that frontmatter is what it reads to decide this one applies.

Claude Code Save it as ~/.claude/skills/rtl-layout-audit/SKILL.md and Claude loads it on its own when what you are doing matches the trigger line. Put it in .claude/skills inside a project instead if the whole team should have it.
Claude Upload the file in the skills section of your settings. Once it is there it applies itself in any conversation where the trigger fits, so you do not have to remember it exists.
ChatGPT There is no skills format to install into, so paste the file contents into a Project instruction or a Custom GPT instead. It then applies to every chat in that project rather than only the one you paste it into.
Anything else Paste the markdown into the chat before your question. It works in any assistant, it just has to be pasted again each time.

Questions about this skill

When is a systematic audit worth it rather than setting the direction and looking at the page?

Setting the direction and eyeballing it is the usual approach. It catches the obvious mirroring and misses everything that matters, because the remaining breakages are local and easy to scroll past. Work through the causes in order before shipping Arabic, Hebrew, Farsi or Urdu, and again whenever an RTL locale shows overlapping text or reversed URLs.

What do I need in hand before starting?

The site actually running in an RTL locale, a browser console, and someone who can read the language. Without a reader you will pass straight over reversed URLs, split input fields and Arabic letters disconnected by letter-spacing, because to a non-reader those look like ordinary text. Screenshots reviewed by a non-speaker are how these defects ship.

What do I end up with, and which part of it gets used?

A defect list grouped by cause: physical properties, missing isolation, SVG anchoring, transform-based animation, each with the rule that resolves it. Grouping by cause is the point, because replacing physical properties with logical ones clears most of the list in one pass, and the remainder is then small enough to work through by hand.

What ruins this most often?

Setting direction rtl on an SVG. It reorders the text and simultaneously redefines what text-anchor start means, so left-anchored labels fly off the canvas and you have traded one bug for a worse one. Use unicode-bidi plaintext, which fixes ordering and leaves anchoring alone. Reversing an animation globally fails the same way, cancelling alternation on rows already reversed.

More in International SEO

Hreflang reciprocity repair

Use when translated pages exist and are indexed but never surface for the right country, or when...

Locale redirect trap audit

Use when visitors report being unable to switch back to a language, or when a shared link opens...

Translation key drift guard

Use on any site whose translation keys are the English source text, where editing a headline sil...

Multilingual sitemap coverage

Use when translated pages exist and are linked but receive no impressions, and the sitemap lists...