Arabic RTL App Design: Mistakes to Avoid

RTL app design means building the whole interface so Arabic users read it right to left: layouts, navigation, icons, text alignment and animation all follow the reading direction. Numbers, phone numbers, charts and some icons are the exceptions that stay as they are. For a GCC app, getting this right is a basic quality bar, because Arabic readers in the UAE and Saudi Arabia notice a half-mirrored screen straight away.

What does RTL app design actually involve?

RTL app design is more than translating strings and switching text alignment. The reading direction changes the order of everything on screen, so the layout has to change with it.

The UAE government sets a clear example. Its Design System, run by TDRA, says government services must work in Arabic and English. It tells developers to set dir="rtl" on Arabic content and to mirror layout and navigation for RTL users.

In practice that means:

• The back button moves to the right and points right-to-left.
• Menus, lists and form labels align to the right.
• Tab bars, steppers and carousels run in reverse order.
• Icons inside text fields switch sides.
• Swipe gestures and slide animations reverse.

Treat it as an architecture decision made early. Retrofitting a finished LTR app is slower than building with start/end rules from the first screen.

What should mirror and what should not?

Mirror anything that shows direction or order. Leave alone anything that is universal, such as numbers, clocks and photos. Material Design 3 and Material Design 2 give most of the rules below.

Apple's archived guide is old, so use it only for these principles. For current platform behaviour, check the Apple Human Interface Guidelines on right to left, which say to reverse the interface as needed to match reading direction.

Which RTL mistakes show up most often?

The most common mistakes come from treating Arabic as a text swap. Check your app against this list.

1. Hard-coded left and right values. Fixed margin-left or paddingLeft values do not flip. Use start/end instead.
2. Mirroring everything. Flipping clocks, charts and product photos confuses users. Make an explicit icon list.
3. Not mirroring anything below the top bar. The header flips but the cards, steppers and bottom tabs do not.
4. Forgetting Android's RTL switch. Without android:supportsRtl="true", mirroring does not work. Google's Android guidance covers this, and the 2013 Android Developers Blog post notes that if you do nothing, the app does not change.
5. Assuming Arabic fits the English width. Arabic labels are often longer. More on this below.
6. Breaking mixed text. Order IDs, SKUs, AWB numbers and English brand names inside Arabic sentences can jumble.
7. Reversing digits or phone numbers. A number must read the same in both languages.
8. Testing only in a simulator with English content. You need real Arabic strings and real readers.

How do you handle numbers, dates and mixed text?

Numbers keep their order in RTL. The W3C Arabic layout requirements state that the most significant digit stays on the left and the least significant on the right, even inside RTL text.

The same W3C document lists three numeral families: European (0–9), Arabic-Indic (U+0660–0669) and Eastern Arabic-Indic (U+06F0–06F9). Arabic-Indic digits and the other two belong to different bidi classes, so they can behave differently in mixed text. Mixing families on one screen is a bug waiting to happen.

Practical rules:

• Choose one digit style per product area and test it with your users. Do not assume one style fits all.
• Format numbers, currency and dates through the device locale. Do not build strings by hand.
• Wrap English fragments such as tracking numbers or product codes so they keep their own direction inside an Arabic sentence.
• Dates follow reading direction for the order of day, month and year, but the digits themselves are not mirrored. The Wikimedia Codex style guide says the same.
• Check the Hijri calendar only if your product needs it.

A hypothetical example: a Riyadh delivery app shows a cash-on-delivery amount next to an order number like "ORD-48213". In an Arabic sentence, the order number and the amount can swap places or lose their prefix if they are not isolated. A COD driver who reads the wrong amount at the door is a real operational problem, so test these strings first.

How do you design for longer Arabic text and fonts?

Plan for Arabic labels to take more room than English ones, and test with real strings. The UAE Design System's own roadmap records a case. A primary navigation with 7 items split into 2 lines per item because the Arabic words were longer. The team fixed it by reducing font size and padding.

You can avoid that with these habits:

• Let buttons and tabs grow, and avoid fixed widths.
• Allow two-line labels on small phones.
• Keep a short label for bottom tabs.
• Use the platform's text scaling and test large text sizes.

For fonts, the UAE Design System typography guide names Noto Kufi Arabic as the primary Arabic font and Alexandria as the secondary for headings. You do not have to copy a government font, but it shows a documented, tested starting point. Always include a fallback.

How do you build RTL support on each platform?

Use the platform's built-in direction support and avoid manual flipping. Each platform has a clear route.

• Android: Declare android:supportsRtl="true". Replace left/right with start/end, for example paddingStart. Mirroring works from Android 4.2 (API 17).
• iOS: Use base internationalisation and Auto Layout with leading/trailing constraints. Mirrored images are the default for some image types, so check the Google Fonts Material Icons guide, which explains that the default semantic content attribute is "unspecified" and you must set forceLeftToRight to stop mirroring.
• Web or hybrid: Set dir="rtl" on Arabic content. The UAE Design System CSS guidance recommends CSS logical properties instead of manual flipping, because fixed-direction properties need RTL overrides that add complexity and bugs.

Apple's layout guidance also tells you to preview on multiple devices, localisations and text sizes.

What should you test before launch?

Test with real Arabic content on real devices, and have native readers review it. Use this checklist.

1. Force RTL in developer options (Android) or the scheme language setting (iOS) and walk every flow.
2. Check forward and back icons, swipe gestures and animations.
3. Enter an Arabic name, a Saudi National Address or a Dubai Makani number in forms and confirm the field alignment and keyboard.
4. Open screens with mixed text: order IDs, AWB numbers, English brand names, prices.
5. Raise the system font size and check that nothing clips.
6. Check push notifications, emails and WhatsApp messages in Arabic. Send WhatsApp messages only to contacts who opted in, as UAE and Saudi PDPL expect.
7. Ask native Arabic readers to complete a task and report what feels wrong.

If your team lacks the capacity for a bilingual build, Quickship's mobile app development service can scope an Arabic and English app on a quote basis. Quickship is a technology company, so it builds the software only. Your business runs the operations behind it.