Design2026-03-225 min

RTL is a constraint you carry from the first wireframe, not a CSS mirror

"Supporting Arabic" usually means piping strings through a translator. Real right-to-left is a design discipline — mirrored by meaning, bidi-isolated, and server-rendered in the right direction from the first paint.

Teams say they "support Arabic" and mean they ran the strings through a translator. Then the layout flips and the seams show: arrows pointing the wrong way, padding stuck on the side it was hardcoded to, numbers scrambling mid-sentence. Right-to-left is not a mirror you flip at the end. It's a constraint you carry from the first wireframe.

What it actually takes, in our build: the document's direction is decided on the server and shipped in the first paint — the locale sets `dir="rtl"` and `lang` before anything renders, so there's no flash of left-to-right layout snapping around after hydration. Directional affordances mirror by meaning, not by accident: arrows flip via a deliberate transform, and layout uses logical properties (start/end, not left/right) so margins, borders, and alignment follow the reading axis instead of a hardcoded side. Embedded Latin words, numbers, and mono tokens are bidi-isolated, so "Brief #A7F3" or "LCP < 2.5s" stay intact inside an Arabic sentence instead of reordering; letter-spacing meant for Latin caps is neutralized so connected Arabic script isn't visually broken. Even the transactional email goes out right-to-left.

It isn't only Arabic. The site ships fully translated content in Russian and Chinese as well, so those visitors read native copy — not English with other words bolted on. Translation is the table stakes; the direction-aware layout is the part most teams skip.

What we refuse to do: machine-translate and ship, treat RTL as a CSS afterthought, or let a layout that only ever breathed in English decide how every other language sits on the page. We don't measure quality by "it renders" — Arabic has to read as if it were designed first.

The principle: a language isn't a string table, it's a reading system. For right-to-left that means direction on the first paint, logical properties over hardcoded sides, and bidi-isolated numerals — not a flipped stylesheet bolted on at the end. When Arabic reads as intentional rather than ported, you built the site for it, not around it.

Let's talk