DEV Community

Cover image for RTL UI design for Arabic apps: a guide for UAE teams
Maniruzzaman Jubayer
Maniruzzaman Jubayer

Posted on Originally published at maniruzzamanjubayer.com

RTL UI design for Arabic apps: a guide for UAE teams

#rtl #css #design #arabic

Originally published at maniruzzamanjubayer.com.

RTL UI design for Arabic apps comes down to one rule and a few exceptions. Mirror everything that follows reading order or shows forward motion: layout, navigation, back arrows, steppers, sliders and progress bars. Leave alone what is not about reading: logos, photos, media controls, clocks, most charts, and the inside of any number, email or code.

The rest decides whether Arabic users trust the product: an Arabic typeface with its own size, line height and zero letter spacing; one digit rule (in the UAE, usually Western digits, even in Arabic); markup that isolates mixed text; and forms and dates that fit the UAE.

This guide is for UAE product teams designing a bilingual Arabic and English app or website. It covers mirroring, mixed text, type, digits, forms, dates, CSS, Figma, accessibility and QA, with an official source behind each rule.

Key takeaways

  • Mirror layout, navigation and progress; never mirror logos, photos, media controls, clocks or the digits in a number.
  • Set lang="ar" and dir="rtl" on the html element, use CSS logical properties, and isolate phone numbers, emails and codes.
  • Give Arabic its own type tokens: a screen-ready face, line height of at least 1.5, zero letter spacing.
  • Default to Western digits in UAE products and pin the choice in code, because locale defaults changed in 2021 and 2024.
  • Never compute religious dates: Hijri algorithms disagree by up to two days, and UAE holidays follow moon sighting.
  • UAE consumer law requires consumer data, adverts and contracts in Arabic, so ship Arabic in the first release.

Why Arabic is a day-one requirement in the UAE

Arabic is the official language of the UAE, and the government fact sheet notes that road, traffic and shop signs are in Arabic and English. The law goes further. Federal Law No. 15 of 2020 on Consumer Protection requires invoices in Arabic (Article 8), Arabic product, payment and warranty information from UAE-registered e-commerce suppliers (Article 25), and consumer data, advertisements and contracts in Arabic, other languages allowed alongside (Article 26). Breaching Article 26 can bring a fine of AED 3,000 to 200,000 (Article 30). I am a designer, not a lawyer, so check with counsel.

The public reference is the UAE Design System from the Telecommunications and Digital Government Regulatory Authority (TDRA): Tailwind-based, MIT licensed, with RTL-ready components and a Figma Community file. It targets federal websites but is the closest thing to a UAE standard, so I cite it throughout.

What is an RTL layout, and what does it mirror?

In Arabic the layout flips along its vertical axis. Apple and Google's Material Design agree on most rules:

One screen in English and Arabic: what mirrors and what stays.

Element In Arabic Why
Layout, navigation, tabs, sidebars Mirror Reading starts on the right
Back, next, chevrons, send Mirror They point along reading order
Progress bars, steppers, sliders Mirror, numerals too Progress follows reading direction
Swipe actions, carousels, badges Mirror They follow the mirrored UI
Photos, illustrations, logos Keep Flipping changes meaning
Media controls and scrubber Keep They follow the tape, not time
Clocks, circular progress, refresh Keep Clocks turn clockwise everywhere
Charts and graphs Usually keep Test time axes with users
Numbers, emails, URLs, codes Keep left to right Their internal order never changes

Charts deserve a test. Material 2 lists charts as not mirrored; Material 3 keeps them left to right for Persian and Urdu. For Arabic dashboards, the safe default is a left-to-right time axis with title, legend and filters mirrored.

Icons: flip, keep or redraw

  • Flip: arrows, chevrons, send, reply, list and text-alignment icons, a speaker with sound waves, and anything moving forward, such as a delivery van.
  • Keep: search (the handle suits a right hand, and most RTL readers are right-handed), clocks, refresh, checkmarks, the slash on an "off" icon and logos.
  • Redraw: icons with Latin letters, such as font size or signature.

Arabic has its own question mark (؟), but Material 3 mirrors the help icon only for Urdu and Persian, and Apple does not ask for it, so leave it unmirrored. Record the decision on every icon; SF Symbols and Android's autoMirrored drawables do the rest.

Bidirectional text and mixed content

Brand names, emails, order numbers and prices sit inside Arabic sentences, and the browser's bidirectional algorithm guesses their order, often wrongly around numbers and punctuation. I rendered the Arabic for "call +971 50 123 4567 now" in Chrome 154: on screen the number read 4567 123 50 971+. Wrapping it in <bdi dir="ltr"> fixed it. Property permit numbers need the same care, as my guide to real estate website requirements in Dubai shows.

  • Set the base direction once, on the html element, not in CSS, as the W3C advises.
  • Wrap each known left-to-right phrase (email, URL, phone number, code, English name) tightly in an element with its own dir.
  • Isolate text you do not control, such as user names and reviews, with dir="auto" or <bdi>.
  • Where markup is impossible, as in title attributes, notifications and SMS, use Unicode isolates (U+2066 to U+2069); Android's BidiFormatter adds them.
  • Follow Apple's rule: an English paragraph of three or more lines stays left aligned inside an Arabic screen.

Arabic typography: typefaces, licences, size and spacing

Arabic letters join, and the W3C notes that Arabic ascenders and descenders reach much further than Latin ones.

Choose a face with a clear licence

Typeface Weights Licence
Noto Kufi Arabic (UAE Design System body face) 100 to 900, variable SIL Open Font License (OFL)
Alexandria (UAE Design System headings) 100 to 900, variable OFL
Noto Sans Arabic 100 to 900, variable OFL
IBM Plex Sans Arabic 100 to 700, seven weights OFL
Tajawal 200 to 900, seven weights OFL
SF Arabic Apple system font Mock-ups for Apple platforms only, no embedding
Dubai Font (Government of Dubai, 2017) Four weights Proprietary, free to download

The OFL allows web use and bundling in apps, subject to its conditions. SF Arabic comes free with iOS, but not for Android or the web. Read the Dubai Font licence before embedding it.

Pair sizes, then add line height

Material warns that Arabic can look smaller than Latin at the same size, and Apple suggests about 2 points more beside all-caps Latin. Give Arabic its own size tokens, or scale the face with size-adjust in @font-face, widely available since September 2023.

Material classes Arabic as a "tall" script. The UAE Design System sets body line height at 1.5 or more, allows 20 percent either way, and recommends body text of at least 16px. Check fixed-height buttons, where marks clip first. Bangla vowel signs clip the same way, and my guide to Bangla fonts and line heights measures the safe values.

No letter spacing, no fake justification

Letter spacing breaks Arabic joins. The CSS Text specification tells authors to avoid it on cursive scripts, and MDN warns the text can look broken, so set it to zero. WCAG's text spacing criterion exempts properties a script does not use.

Kashida, the stretching of joins to justify text, varies across browsers, and the UAE Design System says never to justify text. Never type tatweel (ـ, U+0640) into strings to fake it: it is a real character, so search and copy see it.

Numerals: Western or Arabic-Indic digits

Arabic uses Western digits (0123456789) or Arabic-Indic digits (٠١٢٣٤٥٦٧٨٩), and Apple notes the choice varies by country. For the UAE, the evidence points to Western digits. Unicode's CLDR locale data switched UAE Arabic to them in version 40 (2021), citing reports that modern UAE signs and government documents use them, and the Arabic u.ae holidays page I checked on 2 October 2026 had 59 Western digits and no Arabic-Indic ones. Neighbours differ (my Node.js test, CLDR 48):

Locale Default digits 1234567.89 formats as
ar-AE, and plain ar since CLDR 46 (2024) Western 1,234,567.89
ar-SA, ar-QA, ar-KW, ar-BH, ar-OM, ar-EG Arabic-Indic ١٬٢٣٤٬٥٦٧٫٨٩
ar-MA Western, decimal comma 1.234.567,89

Older devices may carry old defaults, so pin digits in code with ar-AE-u-nu-latn (or -u-nu-arab if research says so). Then:

  • Normalise input. Convert typed or pasted Arabic-Indic (U+0660 to U+0669) and Persian (U+06F0 to U+06F9) digits to 0 to 9 before validation.
  • Never string-match formatted output. In my test, Intl wrapped Arabic AED amounts in invisible right-to-left marks.
  • Plan for the dirham sign. The Central Bank unveiled it on 27 March 2025, and Unicode 18.0 (16 September 2026) encodes it as U+20C3. Until fonts catch up, keep "AED" as fallback and give any SVG an accessible name.

From my work

My team designed ZenPay, a mobile wallet for sending, receiving and tracking money, and Nexfolio, an AI-powered investment dashboard. Products like these are mostly amounts, tables and charts, so if you add Arabic to one, prototype those components in both directions first.

Forms and input for UAE users

Users switch between Arabic and English keyboards mid-form, so every field must cope with both scripts and both digit sets.

  • Names. The W3C recommends one full-name field, long enough for long names. Arabic names can chain "ibn" (son of) with a father's and grandfather's name, so first and last name boxes force guesses. UAE PASS, the digital identity used to sign in to integrated UAE services, returns names in English and Arabic: prefill both.
  • Phone numbers. Under the numbering plan filed with the ITU, UAE mobile numbers have nine digits after +971, starting with 5, or ten with a leading 0 at home. Keep the field left to right in both languages (type="tel", dir="ltr"), accept every form, and validate with a maintained library.
  • Emails, URLs and codes take dir="ltr". Free text takes dir="auto", plus the dirname attribute to send its direction to the server.
  • Addresses. The Universal Postal Union's UAE sheet has no postcode line; mail goes to PO Boxes. Ask for emirate (seven options), area, building and flat, offer a map pin, and make the 10-digit Makani number, used in Dubai and four other emirates, optional. Never require a ZIP code.
  • Labels and errors. Labels sit on the start side, placeholders are never the only instruction, as the UAE Design System advises, and every error exists in both languages.

Dates, times and the Hijri calendar

The UAE runs on the Gregorian calendar, but the official u.ae portal says Islamic holidays follow moon sighting, and its Arabic holiday page mixes both calendars in one list.

  • Show Hijri only where it matters, such as religious dates and Ramadan schedules.
  • Never calculate holidays. Formatting 2 October 2026 with four Hijri algorithms in Node.js gave 19, 20 and 21 Rabi al-Akhir 1448. Publish dates from the official announcement.
  • Use ar-AE, not generic Arabic. It writes October as أكتوبر, where ar-SY uses تشرين الأول.
  • Get the week right. CLDR gives ar-AE a Monday start and a Saturday and Sunday weekend, matching the federal week since 1 January 2022 (Sharjah's government weekend is Friday to Sunday).

Setting up code and Figma for both directions

In code

Swap lang and dir on the html element per locale and write styles with logical properties, which flip with direction: margin-inline-start instead of margin-left, inset-inline-start instead of left, text-align: start instead of left. The UAE Design System uses Tailwind's ps- and pe- utilities. Flip directional icons with :dir(rtl), widely available since December 2023.

Do not fake RTL with flex-direction: row-reverse: MDN warns it splits visual order from DOM order, which hurts screen reader and keyboard users. On Android, set android:supportsRtl="true" with start and end attributes; iOS components flip automatically. For a cross-platform app, see how Flutter and React Native handle RTL, including an in-app language switch. My team can build the front end in React and Next.js this way.

In Figma

Figma gives each text layer a direction: automatic, left to right or right to left. Its help centre covers text, not layout mirroring, so:

  1. Build every component with auto layout, so mirroring means reordering, not redrawing.
  2. Create a Language variable collection with English and Arabic modes: string variables for copy and font family, number variables for size, line height and letter spacing (zero in Arabic).
  3. Add a Direction property only where internal order changes, such as inputs with icons and list rows.
  4. Keep an RTL page of the key flows, annotated with left-to-right islands and the digit rule.

From my work

My team works in weekly design sprints in Figma, with written updates in Slack every 48 hours, and hands over a documented design system with developer handoff. On a bilingual product, that system holds the Arabic mode and the mirroring and digit rules.

Accessibility for Arabic screen reader users

  • Declare language. WCAG 3.1.1 and 3.1.2 require the language of the page and of each passage to be programmatically determinable, so screen readers pronounce text correctly: lang="ar" on the page, lang="en" on English passages. The W3C notes that lang does not set direction, nor dir language.
  • Translate invisible text: aria-label values, hidden labels and alt text.
  • Label meaning, not direction: "Next" (التالي), never "right arrow".
  • Keep focus order equal to visual order by setting direction with dir, not reversed rows.
  • Test like the government does. The UAE Design System asks for WCAG 2.1 testing with screen readers and keyboards, for "people of determination", the UAE term for people with disabilities. Use VoiceOver and TalkBack in Arabic.

Step by step: planning a bilingual product

  1. Confirm the locales, usually ar-AE and en-AE, and launch both together if you sell to consumers.
  2. Make the decisions below and record them in the design system.
  3. Choose the Arabic and Latin faces together and check licences per platform.
  4. Design onboarding, the main forms, checkout and the dashboard in both directions in the first sprint.
  5. Get real Arabic copy early. Placeholder text hides length problems.
  6. Build with logical properties from the first component. Retrofitting is where cost hides; my UAE design cost guide covers bilingual scope.
  7. Have native speakers review every release. Translation is not localisation.
Decision UAE default Change it when
Digits Western in both languages Users expect Arabic-Indic, or you serve the wider Gulf
Charts Left-to-right time axis Users read your charts right to left
Hijri dates Secondary label on religious dates The product centres on religion or Ramadan
Help icon Not mirrored Arabic users say otherwise

QA checklist before you ship Arabic

Area Check How to test
Direction lang and dir on html; navigation, tabs and swipes mirror Inspect the root, walk main flows
Icons Arrows flip; clocks, search, media controls and logos do not Compare with the icon list
Numbers and mixed text One digit rule; phone numbers, emails and names isolated Prices, tables, pasted content
Type Line height 1.5 or more, zero tracking, no clipped marks Longest strings in buttons and rows
Forms Arabic names accepted, digits normalised, no postcode Submit with Arabic-Indic digits
Accessibility lang on parts, translated labels, sane focus order VoiceOver, TalkBack, keyboard
Copy and legal Native review; invoices and terms in Arabic Sign-off before release

Common mistakes to avoid

  • Adding Arabic at the end, when every fix touches finished screens.
  • Mirroring whole screens with a transform, which flips photos and logos too.
  • Reusing English tracking and line height for Arabic.
  • Mixing digit styles, or trusting device defaults.
  • Requiring a postcode or Latin-only names.
  • Computing Eid dates instead of using the official announcement.

Frequently asked questions

Should numbers be reversed in an Arabic interface?

No. The digits inside a number, phone number or code keep their left-to-right order, Western or Arabic-Indic. What reverses is a sequence showing progress, such as numerals along a slider, because the control is mirrored. If numbers look scrambled in Arabic sentences, isolate them with bdi.

Do UAE apps use Western or Arabic-Indic digits?

Western digits are the norm for UAE products, in Arabic as well as English. Unicode's locale data for UAE Arabic has defaulted to them since 2021, and the official u.ae portal uses them in Arabic. Saudi Arabia, Qatar, Kuwait, Bahrain and Oman default to Arabic-Indic digits, so decide per market.

Which Arabic font is best for an app or website?

Look for several weights, clear letters at small sizes and a licence covering web and apps. Noto Kufi Arabic (the UAE Design System's choice), Noto Sans Arabic, IBM Plex Sans Arabic and Tajawal are free under the SIL Open Font License. SF Arabic works in iOS apps but cannot be embedded elsewhere.

How do I make a website RTL with CSS?

Set direction in HTML, not CSS: lang="ar" and dir="rtl" on the html element. Then use logical properties such as margin-inline-start and text-align: start, which flip automatically. Flip directional icons with :dir(rtl), wrap left-to-right content in elements with their own dir, and avoid row-reverse, which breaks focus order.

Is Arabic legally required on UAE websites and apps?

For consumer-facing businesses, largely yes. Federal Law No. 15 of 2020 on Consumer Protection requires consumer data, advertisements, contracts and invoices in Arabic, other languages allowed alongside, and Arabic product information from UAE-registered e-commerce suppliers. Fines for breaching the language article run from AED 3,000 to 200,000. Take legal advice.

Does Figma support Arabic and RTL design?

Yes, for text. Figma renders Arabic and gives every text layer a direction setting of automatic, left to right or right to left. Layout mirroring is not part of that feature, so build with auto layout, add a Direction property where order changes, and use variable modes for Arabic.

My recommendation

Decide the rules before the first screen: digits, chart direction, Hijri use, the Arabic typeface and the icon list. Design core flows in both directions from the first sprint, build with logical properties, and have native speakers review every release. Arabic then becomes a mode of one design system, not a second product. For a bilingual marketing site rather than an app, my guide to Arabic website design in Qatar covers the CMS, hreflang and the law; for Saudi sign-in, see Nafath login UX.

My team does this work from Dhaka, remotely, sharing part of your working day; see how I approach product design for Dubai and UAE teams. A project starts with a free 30 minute intro call, then a written scope and one fixed quote for the whole project, with no retainer.

Sources and method

Sources were read on 1 and 2 October 2026. Rendering and formatting tests ran on 2 October 2026 in Chrome 154 (headless) and Node.js 24.14.1 (ICU 78.2, CLDR 48). Fines are in AED as written in the law; no currency conversion was needed. Evidence on which digits UAE users prefer is thin: locale data, a CLDR ticket and the government portal, not a user survey.

Top comments (0)