Building Arabic software: six things that break, and none of them are translation

Every screen we ship exists in English and Arabic, and we do not charge extra for it. That is not generosity — it is that retrofitting Arabic costs several times what building for it costs, so we stopped offering the cheap version. Here is what we learned paying for it the hard way.

1. Bidirectional text will reverse your technical codes

This is the one that reaches production undetected. Put a Latin technical code inside an Arabic sentence and the Unicode bidirectional algorithm can reorder it. A tyre size of 205/55R16 renders as 16R55/205. A part number 28-410 shows as 410-28. The characters are all correct; the order on screen is not.

It bites hardest on exactly the values where being wrong matters most: part numbers, dimensions, IBANs, plate numbers, invoice references. And it will not show up in a translation review, because the translator sees correct Arabic — the corruption is in the Latin run beside it.

The fix is to isolate the run so the surrounding direction cannot touch it — a wrapper with direction set explicitly and bidi isolation, or the Unicode isolate characters. Cheap to apply, invisible until you know to look.

2. Left and right are the wrong words

Any spacing, border or alignment written as left or right has to be manually mirrored for Arabic, and one that gets missed leaves a panel visibly wrong. Modern CSS solves this outright with logical properties — inline-start and inline-end instead of left and right. Write the layout that way once and it mirrors itself.

This one decision is most of the difference between an Arabic version that took an afternoon and one that took three weeks.

3. Numerals are a choice, and it is not obvious

Arabic-Indic numerals (٣٦٤) read natively in prose. Latin numerals (364) are what most UAE business users expect in a financial table, and what they will paste into a bank portal. We use Arabic-Indic in narrative text and keep Latin in tables and anything copied elsewhere — but the point is that somebody has to decide, per context, rather than letting a formatting library decide silently.

4. Not everything mirrors

Navigation arrows mirror. A back arrow should point right in Arabic. But a clock face does not mirror, a play button does not mirror, a logo does not mirror, and a chart with a time axis usually should not. Blanket-flipping the interface produces a page that is technically right-to-left and quietly absurd.

5. The font stack is not the same stack

A Latin font falling back to a system Arabic face gives you two typefaces of different weight and rhythm on one screen, and Arabic generally needs more line height to stay readable. Set an explicit Arabic stack and its own line height, or the Arabic side will look like a draft next to the English.

6. Half-translated is worse than untranslated

The common failure is a screen that is 90% Arabic with four English strings left in it — a button, an error, an empty state, a tooltip. It reads as unfinished, and it is the single loudest signal that the Arabic version was an afterthought.

We solved it structurally rather than with discipline: every piece of copy in our demos is declared as a pair at the point it is written, so a string that exists in one language and not the other cannot compile. Discipline fails on a deadline; a structure that makes the mistake impossible does not.

The short version

Arabic support is an architecture decision, not a content task. Made at the start it costs almost nothing. Made at the end it is a rewrite, and it is why so much software sold in this region has an Arabic mode nobody in the office actually uses.

Sources

• Unicode Consortium — Unicode Bidirectional Algorithm (UAX #9)Put a Latin technical code inside an Arabic sentence and the Unicode bidirectional algorithm can reorder it.
• W3C — CSS Writing Modes Level 4, the unicode-bidi propertyThe fix is to isolate the run so the surrounding direction cannot touch it — a wrapper with direction set explicitly and bidi isolation, or the Unicode isolate characters.
• W3C — CSS Logical Properties and Values Level 1Modern CSS solves this outright with logical properties — inline-start and inline-end instead of left and right.