Mirror the structure, not everything inside it
In a right-to-left interface reading starts at the right, so anything that expresses order or direction flips. Write layout with logical properties, start and end instead of left and right, so one component serves both directions. The short definition is in our RTL design glossary entry.
| Mirrors | Stays as it is |
|---|---|
| Page layout, columns and navigation order | Logos and brand marks |
| Back, forward and chevron arrows | Photos and illustrations, unless they point in a direction |
| Progress bars and step indicators | Clocks, check marks, plus and minus signs |
| Text alignment, list indents and sliders | Phone numbers, codes, URLs and Latin text runs |
| Swipe gestures and carousel direction | Maps and the shape of real objects |
Some elements need a decision, not a rule: media controls, charts and icons that combine an object with a direction. Decide once, record it in the design system, and confirm it with native readers.
Arabic typography
Pick a typeface designed for Arabic
Do not let the browser or phone fall back to a generic Arabic font. Choose a family drawn for Arabic, such as Cairo, IBM Plex Sans Arabic, Noto Sans Arabic or Tajawal, and check its licence. When you pair it with a Latin font, compare weight and x-height side by side so a mixed line does not look uneven.
Size and line height
Arabic letters carry dots, diacritics and tall strokes above and below the baseline, so a Latin line height clips or crowds them. As a rule of thumb, start with a line height of about 1.6 to 1.8 for body text and 1.4 to 1.5 for headings, then test with real text that includes diacritics. Arabic often reads smaller than Latin at the same size, so compare the two and raise the Arabic size if it looks weak.
What to avoid
- Letter spacing. Arabic letters join, and spacing them breaks the joins and makes words harder to read.
- Per-letter effects. Never split Arabic into single letters for styling or animation. Work by word or by line.
- Italics and forced uppercase. Arabic has neither. Use weight and size for emphasis, and avoid very heavy weights at small sizes.
- Justified text without tuning. Stretched spaces leave uneven gaps. Align to the start unless a typographer has tuned it.
Numbers, dates and currency
Arabic interfaces use two digit systems: Western digits (0 to 9) and Arabic-Indic digits. The right one depends on the market and the audience. Choose one per product, use it everywhere, including inputs and charts, and confirm it with native readers. Locale libraries pick by locale and the default differs between Arabic locales, so set it on purpose, for example with the numbering system option of Intl.NumberFormat.
For dates, decide whether to show the Gregorian calendar, the Hijri calendar or both. The first day of the week and the weekend days differ between countries, so make them configurable. Format currency with the locale's rules instead of assembling the text by hand, and keep phone numbers, codes and identifiers left to right.
Icons and arrows
Mirror an icon when its meaning depends on reading or movement direction, such as back, forward, reply, send and list indent. Keep it when it shows a real object or a universal symbol, such as a clock, a check mark or a logo. Put the rule in the icon set as a flag on each icon, so nobody decides case by case. Icons that contain Latin letters, such as a bold B, need an Arabic equivalent or a neutral replacement.
Forms and input
- Align labels, hints and error messages to the start edge, and put validation next to the field.
- Accept both scripts in text fields. Do not force Latin letters, and do not assume a first and last name split.
- Give email, URL, password and code fields a left-to-right direction so punctuation stays in place, and use automatic direction for free text.
- A one-time code is a number, so its boxes usually keep digit order left to right.
- Test with an Arabic keyboard layout and the right input type.
Mixed Arabic and English text
Arabic text often contains Latin brand names, product codes, URLs and numbers, and the Unicode bidirectional algorithm can put punctuation on the wrong side of them. The fixes are small but must be systematic:
- Set automatic direction on text that users type, so each string follows its first strong character.
- Isolate inline Latin runs with the bdi element or the unicode-bidi isolate property so they do not disturb the sentence around them.
- Build sentences from translatable templates with placeholders, never by joining fragments, so translators can reorder them.
- Test the awkward strings: an order code mid-sentence, a name ending in a number, a URL at the end of a line.
Search, tables and charts
Search
Arabic search must normalise text: treat the alef variants as one letter, ignore diacritics and tatweel, and, where it suits your data, treat the taa marbuta with the haa and the alef maqsura with the yaa. Let people search in either script, and decide whether Latin spellings of Arabic names should match, because names are spelled many ways.
Tables and charts
Tables mirror: the first column sits on the right and the action column on the left. Keep numeric columns aligned so values compare easily. In charts it is common to mirror the time axis so time runs right to left, but confirm it with your readers, label axes clearly, and do not mirror maps.
Motion direction
Horizontal motion follows reading direction: pages and drawers enter from the start side, carousels advance toward the end, progress fills toward the end and swipe actions mirror. Vertical motion and fades do not change. Respect the reduced-motion setting, and never animate Arabic letter by letter.
Test with native readers
Arabic is not a translation of the English layout. Copy length differs, lines break in other places, and tone matters. Design and review the Arabic screens as their own frames with real Arabic content, never placeholder text and never by flipping the English frame.
- Ask native readers to complete real tasks, not to proofread.
- Include long names, mixed text, numbers and error messages in every test.
- Check real devices and browsers, including large text sizes.
- Confirm the tone: clear Modern Standard Arabic for the interface, in one consistent voice.
For the whole workflow see our guide to bilingual Arabic and English products and the article on designing bilingual RTL products. For market context see UI/UX design for Saudi Arabian businesses. These rules belong in your design system from the first token.