Designing Right-to-Left Interfaces Properly: A Practical Arabic UX Guide

Many Arabic interfaces are English interfaces with the text direction switched. They technically work, but Arabic speakers notice immediately: an arrow pointing the wrong way, a phone number broken into pieces, a progress bar filling from the wrong side, a font that looks squeezed next to its Latin counterpart. Each issue is small. Together they tell users that the product was not made for them.

Getting RTL right is not difficult, but it does require deliberate decisions. This guide collects the ones that matter most in practice.

Mirroring: the basic principle

In a right-to-left interface, the reading flow starts at the top right. Elements that express order or direction should be mirrored so that their meaning stays the same. Navigation drawers open from the right, back buttons point right, breadcrumbs run right to left, and the first column of a table sits on the right.

In modern web development, the most reliable way to achieve this is to use logical properties rather than physical ones: margin-inline-start instead of margin-left, padding-inline-end instead of padding-right, and text-align: start instead of left. Combined with the dir attribute on the root element, most of the layout then mirrors itself. Flutter, SwiftUI and Android offer equivalent start and end concepts.

What should not be mirrored

Mirroring everything is as wrong as mirroring nothing. Some elements represent real-world objects or universal conventions and must keep their direction.

• Media controls: play, fast-forward and rewind follow the direction of the tape, not of reading
• Clocks and circular progress that represent time
• Logos, brand marks and photographs
• Charts with a time axis, which usually still run left to right in Arabic financial and business contexts, though some products choose otherwise; be consistent
• Icons of objects with no inherent direction, such as a search magnifier or a checkmark
• Code snippets, URLs and email addresses

Icons need a review, not a flip

Go through your icon set and sort each icon into one of three groups: mirror (arrows, send, reply, undo, list indentation), do not mirror (search, settings, camera, heart), and redraw (anything with text or a hand in it, such as a pencil writing or a pointing finger). Keep this list in your design system so developers do not have to guess.

Arabic typography

Arabic letters connect and change shape according to their position, and the script has ascenders and descenders that differ from Latin. A font that looks balanced in English can look tiny or crowded in Arabic at the same size.

• Choose an Arabic typeface designed for screens, and pair it with a Latin face of similar weight and character
• Expect Arabic to need a slightly larger size or more line height to feel equivalent
• Never apply letter-spacing to Arabic text; it breaks the connections between letters
• Avoid all-caps styles in the English design that you then expect Arabic to match; Arabic has no capitals, so use weight or size for emphasis instead
• Test with real content, including long words and diacritics where they are used

Numbers and dates

There are two digit systems in common use: Western Arabic digits (0123456789) and Eastern Arabic digits. Usage varies by country, audience and context. Many Gulf apps use Western digits throughout for consistency with payment systems and official documents, while some editorial and government content prefers Eastern digits. Decide deliberately, apply it consistently and make sure phone numbers, order numbers and codes are never split or reordered by the bidirectional algorithm.

Dates need the same care. Decide whether you show Gregorian, Hijri or both, and use the platform's locale formatting rather than building date strings by hand. Units and number formats should appear where local users expect them; test this with real users rather than relying on defaults.

Mixed-direction text

Real Arabic content is full of English: brand names, product codes, email addresses, technical terms. The Unicode bidirectional algorithm handles most of this, but it fails in predictable places, such as a sentence that ends with an English word followed by punctuation, or a list item that starts with a number.

• Use the dir attribute or isolation (bdi in HTML) around user-generated content whose direction you do not know
• Set input fields for email, URLs and phone numbers to left-to-right even inside an Arabic form
• Check truncated text: the ellipsis should appear at the end of the reading direction

An Arabic interface is finished when an Arabic speaker stops noticing it is a translation.

Forms and input

Forms are where RTL problems cost real conversions. Labels and helper text should align to the right, but specific fields should stay left-to-right. Validation messages should be written in natural Arabic, not translated word by word. Name fields should accept Arabic characters and allow for names that do not split neatly into first and last. Address fields should reflect local reality: in many Gulf areas, a building name, a landmark or a map pin is more useful than a street number.

Motion and gestures

Transitions should follow the reading direction. In RTL, moving forward through a flow slides content in from the left, and swiping to go back moves right. Carousels should start on the right. Progress indicators in steppers fill from right to left. These details are easy to miss because they only show up in a running app, not in static mockups.

Build RTL into the design system

The easiest and least costly moment to support RTL is before the first screen is designed. In practice that means:

1. Define spacing and alignment with start and end, never left and right
2. Maintain an icon direction list as part of the system
3. Design key screens in both directions from the first round of mockups
4. Choose fonts for both scripts together and set separate type scales if needed
5. Include Arabic test content in every component in your design tool
6. Add RTL screenshots to your review checklist and automated visual tests

Test with the people who will use it

Automated checks catch layout bugs, but only native readers catch tone, awkward phrasing and conventions that differ between, for example, Saudi and Emirati users. A short round of testing with five or six people from your audience usually reveals the issues that matter most.

At Vega SDS, we design Arabic and English together from the first wireframe, in Figma and in code. If your product's Arabic experience feels like an afterthought, a focused RTL review is often a quick way to find and fix the problems that users notice first.