A common approach to Arabic support is to complete the English product, then switch the document direction, mirror the layout through CSS, and send the strings for translation. This satisfies a requirement in a specification. It produces an interface that Arabic readers identify immediately as a mirrored English product.
What requires separate design attention
Typography
Arabic script is connected, has no capital forms, and distributes visual weight differently from Latin script. Line height that reads comfortably in Latin type often appears compressed in Arabic. Type sizes that establish a clear hierarchy in English frequently require adjustment to achieve equivalent hierarchy in Arabic. A type scale developed for one script and applied unchanged to the other will not produce equivalent results.
Numerals
Users in the Gulf encounter both Western Arabic and Eastern Arabic numerals depending on context. Government documentation, banking interfaces and mobile operating systems do not apply a single convention. This requires an explicit product decision, and the appropriate answer often differs between currency, dates, national identifiers and telephone numbers within the same screen.
Bidirectional text
Mixed-direction content is normal: Arabic sentences containing English product names, Latin-script email addresses, and telephone numbers with international prefixes. Bidirectional resolution produces unexpected results around punctuation at direction boundaries. Full stops can render at the opposite end of a sentence and parenthesis pairs can invert. These cases appear in the first screen of production data.
Most right-to-left defects are invisible under placeholder text and apparent under real names, addresses and reference numbers. Arabic content of production shape should be loaded before design sign-off.
Mirroring is selective
Layout mirrors. Several categories of element do not. Media playback controls generally retain direction, since play indicates forward rather than rightward. Charts with a time axis usually retain left-to-right progression, as that convention is stronger than reading direction. Logos do not mirror. Icons representing physical objects do not mirror, while icons representing direction do.
No single rule resolves every case, which is why these decisions require a designer who reads Arabic rather than a default applied by the stylesheet.
Our approach
- Wireframe in Arabic first where the primary audience is Arabic-speaking, and derive the English layout from it.
- Build the component library bidirectionally from the outset, using CSS logical properties so direction is a document-level property rather than a parallel implementation.
- Review the Arabic build against its own acceptance criteria as a distinct deliverable.
- Test with production-shaped content in both directions before design sign-off.
Adopted at design stage, this adds a small percentage to design effort. Introducing equivalent Arabic quality into a product designed in English constitutes a redesign, and is generally proposed at the point in a programme where redesign budget is least available.
Bilingual quality and accessibility follow the same economics. Specified at the outset they are inexpensive. Retrofitted, they constitute a second programme.