Building a Product for Both Arabic and English Users

Serving Arabic and English speakers from one product sounds like a translation job. It is really a design job, and the teams that treat it as translation end up with an Arabic version that technically works and feels slightly wrong everywhere. Here is what matters beyond swapping the strings.

Direction is a layout decision, not a CSS flag

Setting the document direction to right-to-left flips text alignment, but it does not rethink your layout. Icons that imply direction, like arrows and progress indicators, need mirroring. Icons that do not, like a phone or a search glass, should stay put. Navigation order flips. Padding that was hard-coded as left or right breaks. Use logical properties, start and end rather than left and right, from the first line of CSS, and most of this takes care of itself.

Numbers and dates are not neutral

Arabic users in different countries expect different numeral systems, calendar formats, and currency positions. Do not hand-format these. Let the platform's internationalisation libraries do it based on the locale, and test with a real speaker from your actual market, not just any Arabic speaker.

Text expands and fonts matter

Arabic text often takes a different amount of horizontal space than the English equivalent and almost always needs more vertical space because of the script's ascenders and descenders. Buttons sized for English labels clip Arabic ones. Choose an Arabic typeface deliberately rather than falling back to the system default, and set a slightly larger base size. Readability improves noticeably.

Mixed content is the hard case

Real content is rarely purely one language. An Arabic sentence with an English product name, a phone number, and a URL is the normal case. Browsers handle this bidirectional text reasonably well, but only if you mark the embedded pieces correctly. Wrap left-to-right fragments in elements with an explicit direction, and test with the ugliest real example you can find.

Treat both languages as first class

The organisational failure mode is that English is the real product and Arabic is a translation task done at the end. Features ship in English first, Arabic strings lag, and Arabic users learn to expect a second-rate experience. The fix is to make the Arabic version part of the definition of done. A feature is not finished until it works, and reads well, in both.