Right-to-left design for Arabic websites: what flips and what must not

A site designed in one direction and mirrored at the end reads as translated: right-to-left support is a decision made in the layout system, not a style toggle.

The false version is cheap because it sits one setting away: take the site built in English, flip the direction, ship the Arabic. And indeed the navigation moves to the right and the page looks, at a glance, finished. The gap opens on the second glance: the carousel advances away from the reading direction, the checkmarks sit on the wrong side of every sentence, and the page has the posture of a document that was folded rather than a text that was written.

The mirror is real, and it is the beginning of the work rather than the end. Navigation flips, arrows flip, progress flows right to left, timelines run the other way. But the craft lives in the two lists the flip does not touch: what must not flip, and what breaks silently when everything around it does. A logo that gets mirrored becomes a stranger. A number keeps its own reading convention inside a right-to-left sentence. An embedded Latin word is not an intruder to be bent around.

The silent breakage is the reason direction cannot be a final coat of paint. Icons whose meaning lives in their direction, a back arrow, a forward arrow, end up pointing the wrong way when the layout mirrors around them. Form fields aligned against the reading direction make every label feel like it belongs to the neighboring box. And the mixed line is the classic: an Arabic paragraph carrying stray Latin punctuation, and the stray mark jumps to the wrong end of the sentence, altering it as it lands.

The honest framing: right-to-left support is a decision made in the layout system, made early, so that every component knows what it means to face the reader. A site designed in one direction and mirrored afterwards in the stylesheets reads as translated, because that is precisely the process it went through. The Arabic is living in a house built for someone else.

The practice: build direction-aware from the start, so that flipping is a property of the system rather than an operation performed on it. Flip the directional things and leave the identity things, and be able to say which is which for every element on the page. Test with real Arabic paragraphs, real product names, real punctuation, at every breakpoint, because placeholder lines hide every failure listed above. Then have a native reader walk the pages before launch, slowly, with the job of noticing what feels folded.

We build in both directions, and we learned the list of what breaks by watching it break. Guidance, not guarantees: the conventions for numbers, for punctuation inside mixed lines, and for your own brand names in Arabic script or Latin are editorial decisions to make deliberately, with a native reader at the table. Design for the reading direction from the first sketch. The mirror will take care of itself, mostly.