Designing the Arabic edition right-to-left from the start

We built the Arabic edition of Arcadia alongside the English one rather than after it. Here is what that actually required.

Logical properties, everywhere

Every spacing and alignment utility in the codebase uses logical properties: ms/me instead of ml/mr, ps/pe instead of pl/pr, text-start instead of text-left. Setting dir="rtl" on the document element then mirrors the entire layout with no per-component overrides. We lint against the physical variants so they cannot creep back in.

Numerals need their own decision

Arabic content can use Western Arabic numerals (1, 2, 3) or Eastern Arabic-Indic ones (١، ٢، ٣). Saudi and Emirati users encounter both daily. We standardised on Western digits for scores, timers and version numbers because those appear inside otherwise Latin strings, and we wrap any mixed-direction run in an explicit dir boundary. Without that boundary a score like "3-1" renders reversed, and it looks like a bug because it is one.

Fonts are not interchangeable

A Latin webfont with a bolted-on Arabic fallback produces uneven stroke weight and broken kerning at connection points. We load a purpose-built Arabic family, subset to the Arabic range, and switch families on the dir attribute rather than shipping both to every visitor.

Icons that carry direction

Back arrows, carousel controls and progress indicators all encode direction. Each one gets rtl:rotate-180. Icons that are merely decorative — a trophy, a gamepad — must not be flipped, and a blanket mirror rule will flip them, so this has to be per-icon.

The iframe is a foreign country

A game loaded in an iframe has its own document and its own direction. Our chrome mirrors; the game inside does not, and should not. Most browser games are built LTR, and forcing them otherwise breaks their own UI. We mirror the frame, its controls and its labels, and leave the contents alone.

None of this is expensive when you do it first. All of it is expensive when you retrofit.