Arabic isn't
a translation.
It's a direction.

I own right-to-left design across five brands. Not a checklist at the end of a sprint — a system that decides, for every screen, what mirrors, what holds still, and why.

The Problem

A mirrored screen
is not an
Arabic screen.

Most products treat RTL as a post-production step: design in English, flip at the end, translate what's left. The result is a product that technically reads right-to-left and feels wrong in a hundred small ways — reversed Latin buttons, scrambled artwork, phone numbers broken in half.

Half the people our brands serve read Arabic first. In Saudi Arabia, Arabic isn't the localization — English is. So the mirror can't be an afterthought. It has to be a system with rules, exceptions, and taste.

The Method

Three ways to flip.
In strict order.

Every element on a screen gets resolved down a ladder. The design system answers first; geometry is the last resort, never the default. Flipping a component that already has an Arabic version doesn't give you Arabic — it gives you a backwards Latin component.

Switch the variant.

Most components carry their Arabic self as a variant — Language=Arabic. Correct type, right alignment, mirrored internals, already QA'd. One property change and the design system does the work.

Most common path

Swap the sibling.

Where Arabic lives as a separate sibling component, swap the instance. Never mirror it afterwards — a swapped component that gets flipped again is a double mirror, and double mirrors are how layouts quietly break.

When no variant exists

Flip the geometry.

Only for what the design system doesn't cover — custom cards, layout frames, raw icons. Physically mirror positions, padding, and alignment. And log it as a gap: every geometric flip is a component the system should eventually own.

Last resort · flagged

The Rules

What mirrors.
What holds still.

The craft of RTL isn't in the flipping — it's in knowing what must not flip. Every rule below exists because getting it wrong shipped a bug somewhere first.

Mirrors always

Layout direction — rows reverse, reading order leads from the right
Horizontal padding and position — left and right trade places
Text alignment — left-aligned becomes right-aligned
Directional icons — arrows, chevrons, back, undo, sort
Progress bars, sliders, pagination — completion flows right to left

Holds still

Numbers, prices, phone numbers — digits are LTR atoms, always
Logos and brand names — identity doesn't have a direction
Media controls — play points forward in every language
Neutral icons — settings, camera, bell, heart, star
Charts and decorative artwork — mirroring scrambles meaning

Ambiguous cases — search, edit, share — get judged screen by screen, never batch-flipped.

The rules, applied — Virgin Mobile KSA plans, same screen in both directions

Virgin Mobile KSA plans screen — English, left-to-right

Virgin Mobile KSA plans screen — Arabic, right-to-left

The Detail

A phone number
that breaks in half
breaks trust whole.

Bidirectional text has failure modes most designers never see. In an Arabic sentence, a phone number is a left-to-right island in right-to-left water. Let it wrap mid-value across a line break and it reads as two different numbers.

So the rule, documented and enforced in every handoff: numbers never wrap mid-value. If a number can't fit on the line with its preceding text, the line breaks before the number — never inside it. It's one line in a spec document. It's the difference between an OTP screen someone trusts and one they re-read three times.

OTP screens in Arabic and English with DO and DON'T annotations — numbers must never wrap mid-value

The spec, annotated — DO and DON'T, in both languages

What it adds up to

Language
is belonging.

A Saudi customer opening Virgin Mobile in Arabic should never sense the product was designed in English and flipped for them. The typography is chosen for Arabic. The components were built with an Arabic self. The numbers hold their shape.

That's what owning RTL across five brands actually means: not flipping screens — building the system that makes every screen already know its second language.

Arabic isn'ta translation.It's a direction.

A mirrored screenis not anArabic screen.

Three ways to flip.In strict order.

What mirrors.What holds still.