Many teams treat Arabic as a "mirrored" version of an English interface: flip the direction and call it done. In reality, an interface read right to left needs decisions of its own, and small mistakes are obvious to anyone who reads Arabic every day.
01Think start and end, not left and right
The one habit that prevents most problems: do not write margin-left or padding-right when you mean "the start" or "the end" of an element. Use logical properties and they flip automatically with the page direction.
02What gets mirrored and what does not
Not everything flips. A practical rule: mirror what expresses reading direction or progress, and leave alone what has a meaning independent of it.
- Mirrored: "next" and "back" arrows, side navigation, progress bars, step order.
- Not mirrored: the clock icon, the check mark, media controls (play), and in many cases time-based charts.
- Watch the arrows: the external-link arrow should point in a direction consistent with the layout (↖ in Arabic).
03Numbers and mixed text
Real interfaces mix Arabic and English: product names, URLs, code. Put Latin text inside an Arabic sentence and the punctuation around it can jump. Isolating these runs with the bdi element or unicode-bidi: isolate usually fixes it. Decide early which digits to show (Western 0-9 or Arabic-Indic ٠-٩) and apply that one decision across the whole site.
04Type and spacing
Arabic letters connect, so do not add letter-spacing: it breaks the joins and distorts the word. Give lines a little more height than you would for English, since Arabic needs more vertical room for marks and extensions. And choose an Arabic typeface designed for screens, not a Latin font with a random Arabic fallback.
05The takeaway
A good Arabic interface is not a mirror image. It is designed with direction in mind from the start: logical properties, a clear decision on what mirrors, isolated mixed text, and testing with real content. These small details are what make a visitor feel the site was written for them.
