Why mirroring is not enough
Most products in the Gulf serve Arabic and English users, often in the same team. The usual approach is to build in English and flip the layout for Arabic. That gets the direction right and almost everything else wrong.
Right-to-left design is a layout in its own right: reading order, alignment, typography and the way numbers and Latin words sit inside Arabic text all need decisions. Here are the mistakes we see most often.
1. Flipping icons that should not flip
Arrows that mean forward and back should mirror. Icons that represent real objects or universal symbols should not: a play button, a clock, a checkmark, a phone or a brand logo. Decide icon by icon, not with one global flip.
2. Breaking phone numbers, prices and codes
Phone numbers, order IDs, emails and prices are left-to-right even inside Arabic text. Without explicit direction they can appear reversed or with the plus sign on the wrong side. Isolate them and set their direction, and keep input fields for emails and phone numbers left-to-right.
3. Letting Latin words break the line
Product names, technical terms and English words inside Arabic sentences can jump to the wrong position or reorder punctuation around them. Wrap them so they keep their own direction, and test real sentences, not placeholder text.
4. Setting Arabic too small and too tight
Arabic letterforms need more room than Latin at the same size. Copying the English font size and line height makes Arabic cramped and harder to read. Give Arabic text a slightly larger size or generous line height, and avoid negative letter spacing, which breaks connected letters.
5. Relying on fonts without proper Arabic
Many popular Latin fonts have no Arabic glyphs, so the browser falls back to a system font that does not match the design and differs across devices. Choose a dedicated Arabic typeface that pairs with your Latin one, and load it only where it is needed.
6. Truncating Arabic text
Arabic and English text rarely have the same length. Buttons, table cells and navigation sized for English cut Arabic words or wrap them awkwardly. Design components to grow with their content and check every screen in both languages.
7. Forms that fight the user
Labels, hints and errors should follow the reading direction, while fields for emails, URLs and phone numbers stay left-to-right. Validation messages must be written in Arabic, not shown as untranslated system errors.
8. Translating instead of writing
Literal translation produces Arabic that is correct but unnatural, and Gulf users notice immediately. Write the Arabic copy for the reader, with the same intent as the English rather than the same words, and review it with a native speaker from the market.
A checklist for bilingual products
Before release, check each screen in Arabic for these:
- Layout reads right-to-left, with alignment and order designed, not only flipped.
- Directional icons mirror; object icons and logos do not.
- Numbers, emails, codes and Latin terms keep their own direction.
- Arabic type is large enough, with comfortable line height and no letter spacing.
- A real Arabic typeface is loaded and used.
- No truncated words in buttons, tables or navigation.
- Copy was written for Arabic readers and reviewed by a native speaker.
Questions
What is RTL design?
RTL (right-to-left) design is designing interfaces for languages read from right to left, such as Arabic. It covers layout direction, alignment, icon behaviour, typography and how left-to-right content like numbers sits inside the text.
Is it enough to translate an English app into Arabic?
No. Translation covers the words but not the layout, typography, direction of numbers and mixed text, or the length differences between languages. Arabic should be designed alongside English from the start.
Should Arabic and English use the same font size?
Usually Arabic needs a slightly larger size or more generous line height than Latin text to read comfortably, and it should never use negative letter spacing.