Mirror the layout, not just the text
In a right-to-left interface the whole layout mirrors: navigation, progress indicators, back buttons and the reading order of cards. Some things should not mirror, such as media playback controls, phone numbers and many logos. Agree the rules in the design system so every screen behaves consistently.
Use the platform’s direction support
On the web, set the dir attribute on the html element and use logical CSS properties such as margin-inline-start instead of left and right. Flutter, iOS and Android all provide directionality support. Building on these from the start is far cheaper than retrofitting an English-only codebase.
Choose typography for both scripts
Arabic text often needs a different size, line height and weight to feel balanced next to Latin text. Pick fonts with good Arabic support, test real content rather than placeholder text and check how numbers, dates and mixed-language strings display.
Localise content, not just words
Product names, forms, address formats, currency and examples should feel natural to Arabic-speaking customers. Machine translation is a useful starting point, but a native reviewer should check key journeys, legal text and marketing pages.
Test with real users in both languages
Run the main journeys in Arabic and English on real devices. Look for truncated labels, icons pointing the wrong way and mixed-direction text in search results, notifications and emails. Small issues in RTL are noticed immediately by native readers.
Further reading
Prepared with AI assistance; technical references checked against the documentation linked above. These are planning considerations, not a guarantee of project results.
Discuss a related projectBack to the blog