Why products are harder than pages
A marketing page in Arabic is mostly text and images flowing down a screen. A product is dense with interface: navigation rails, toolbars, forms with dozens of fields, data tables, charts, dialogs, steppers, sliders and notifications. Each has a direction built into it, often without anyone having thought about it, because the designers read left to right.
When Arabic is added late, the usual method is to flip the whole interface with one setting and then repair what broke. Much breaks, and some of it only shows with real data: a phone number displayed backwards, a table whose columns reversed but whose numbers did not align, a chart running the wrong way. This checklist is ordered so that those cases are designed for, not discovered. If your project is a website, our guide to planning an Arabic and English website is the better starting point.
Layout and navigation
| Element | In a right-to-left interface | Watch for |
|---|---|---|
| Side navigation | Moves to the right edge | Collapse and expand arrows pointing the wrong way |
| Top bars | Logo to the right, account and actions to the left | Search fields and notification panels opening off screen |
| Breadcrumbs and steppers | Run from right to left | Separators and connecting arrows left unflipped |
| Tabs | First tab at the right | The active indicator animating in the old direction |
| Dialogs | Primary action placement mirrors your left-to-right rule | Close buttons left where they were |
| Drawers and panels | Slide in from the opposite side | Swipe gestures that still expect the old side |
| Back navigation on phones | Back points and swipes the other way, following the operating system | Custom gestures that fight the system's own |
| Progress bars and sliders | Fill from right to left | Sliders whose minimum is still on the left |
Ask developers to use direction-neutral properties, start and end in place of left and right, in every component. Then one attribute on the page reverses the layout correctly, and new screens are right by default.
Icons: which to mirror and which to leave
Mirror these
- Arrows for back, forward, next and previous
- Chevrons that open menus or expand rows sideways
- Icons showing text direction, lists or indentation
- Send, reply, undo and redo arrows
- Progress and direction-of-travel icons
Leave these
- Logos and brand marks
- Play, pause and media timeline controls
- Clocks and anything showing clockwise rotation
- Check marks, plus signs and search magnifiers
- Icons of real objects, such as a camera or a phone
Mark each icon in your library as mirrored or fixed, once, so that the decision is not remade on every screen. Icons that contain text or a question mark need a separate look, since the Arabic question mark faces the other way.
Forms and input
- 01
Align labels and fields to the right
With required marks, help text and error messages on the reading side.
- 02
Let each field follow its content
A name typed in Arabic flows from the right. An email address, a web address, a password or a product code typed in the same form flows from the left. Set these fields to left-to-right explicitly.
- 03
Handle numbers deliberately
Phone numbers, amounts and identity numbers read left to right even inside Arabic. Decide whether Western or Eastern Arabic digits are accepted and shown, and accept both on input.
- 04
Open the right keyboard
Numeric keypad for numbers, Latin keyboard for emails, Arabic for names, where the platform allows it.
- 05
Mirror compound controls
Fields with an icon or unit at one end, steppers, date ranges with from and to, and toggles.
- 06
Review calendars
Week start day and weekend differ by country, and some users expect the Hijri calendar alongside the Gregorian. Ask your audience.
- 07
Validate in Arabic
Names with Arabic characters, spaces and particles must pass validation, and error messages must be translated and specific.
Tables, numbers and charts
- 01
Column order
What to decideThe first column, usually the identifying one, sits at the right. Check that frozen columns, row actions and selection boxes moved with it.
- 02
Number alignment
What to decideNumbers in a column should still line up by their digits so that they can be compared, whichever side that puts them on. Test with real figures.
- 03
Currency and units
What to decideWhere the symbol or code sits relative to the number, and whether a space separates them, in Arabic text.
- 04
Dates and times
What to decideFormat, digits, month names and order, consistent across the product.
- 05
Charts with time
What to decideMany Arabic-language dashboards keep time running left to right, as international charts do, and others mirror it. Choose one convention with your users and apply it everywhere.
- 06
Sorting and search
What to decideArabic alphabetical order, and search that ignores diacritics and treats variant letter forms as the same.
- 07
Exports
What to decideSpreadsheets, PDFs and printed reports generated by the product need the same direction, type and number handling as the screen.
Mixed-direction text
Real Arabic content is full of left-to-right fragments: brand names, product codes, email addresses, measurements, English technical terms. Software follows a standard set of rules to order these within a line, and the rules give surprising results at the boundaries. A sentence ending in an English word followed by a full stop can show the stop on the wrong side. A code containing a dash can appear with its halves swapped.
- Isolate inserted values. When a user's name, an order number or a file name is placed into a sentence, mark it as a separate run so that it cannot disturb the text around it. Platforms provide a standard way to do this.
- Set direction per item in lists. In a list of user-generated content, each item should take its direction from its own first strong character.
- Check punctuation and brackets. Parentheses, colons and slashes around mixed text are the usual casualties.
- Test truncation. Shortened text with an ellipsis must cut at the reading end, and the tooltip must show the full value correctly.
- Never build sentences from fragments. Joining translated pieces in code produces wrong word order. Use complete translatable sentences with placeholders.
A worked example
Adding Arabic to a delivery dispatch dashboard
This example is invented to show the kinds of fault that only real data reveals. A delivery company adds Arabic to the dashboard its dispatchers use all day.
- ApproachComponents are converted to direction-neutral spacing, and the icon library is marked: 38 icons mirror, 112 stay fixed.
- First testWith sample Arabic text the screens look correct. With a copy of real data, dispatchers find driver phone numbers displayed in reversed groups and order references such as AB-1042 shown as 1042-AB.
- FixPhone numbers, references and plate numbers are set to left-to-right and isolated wherever they are inserted into Arabic text.
- TablesThe orders table reverses its columns, but the amount column loses its digit alignment. It is realigned, and the row action menu is moved to the new trailing edge.
- ChartDispatchers are asked about the hourly volume chart. They prefer time running left to right, matching the reports they receive from partners, so it is left unmirrored and the decision is recorded.
The second test, run by two native-speaking dispatchers over a full shift, finds only wording changes. The reversed references would have caused real mistakes on the road had the product shipped after the first test.
Typography, and testing with native readers
Arabic needs its own typographic settings in a product, just as on a page. Choose a typeface drawn for interface use, with clear forms at small sizes. Give it slightly more size and line height than the Latin equivalent, since dense tables and labels suffer most. Remove letter spacing, avoid italics and do not rely on uppercase for emphasis, because Arabic has none. Check bold weights at small sizes, where counters can fill in.
Then test with people who read Arabic daily and do the job the product supports. Give them real tasks and real data, on the devices they use. They will notice a stiff translation, an icon pointing the wrong way or a form that fights their keyboard, none of which a team that cannot read the language will see. Repeat the test after each significant release, since new screens are where regressions appear.
The RTL product design checklist
Arabic RTL product design checklist
0 of 11 checkedWhat to do next
Switch one busy screen of your product to right-to-left and fill it with real records, including names, phone numbers and reference codes. The faults you see in ten minutes will tell you how much work lies ahead and where the components need to change.
Our UI/UX design services page describes how we design products, and a design system is the right place to make direction a property of every component. Show us the product you want in Arabic.
Common questions
Can we add Arabic by flipping the interface automatically?
Flipping the layout with a single direction setting is the correct mechanism, and it works well when components were built with direction-neutral spacing. It is not sufficient alone. Icons, mixed text, numbers, tables, charts and gestures each need decisions, and typography needs its own settings. Expect a review of every screen with real data after the flip.
Do numbers read right to left in Arabic?
No. Numbers are read left to right even within right-to-left text, whether written in Western or Eastern Arabic digits. That is why phone numbers, amounts, codes and dates need care: the surrounding text flows one way and the digits the other. Software handles this by rule, and inserted values should be isolated to keep them intact.
Should charts be mirrored for Arabic users?
Conventions vary. Some audiences expect a time axis to run right to left, while many are used to international charts that run left to right, especially in finance and analytics. Ask your users, choose one convention and apply it to every chart in the product. Mixed conventions within one product are the outcome to avoid.
Which Arabic font should we use in an app?
Choose a typeface designed for screens, with open shapes that stay legible at small sizes and a range of weights. Pair it with a Latin typeface of similar weight and proportion, or use a family that includes both scripts. Test it in your densest screens, at the smallest size you use, on ordinary phones.
How do we test an Arabic interface if our team does not read Arabic?
You need native readers, ideally people who do the work your product supports. Have them perform real tasks with real data and describe what feels wrong. Automated checks can catch untranslated text and layout overflow. They cannot judge wording, tone or whether a mixed-direction value reads correctly, and those are where trust is lost.