Arabic and RTL UX design: a practical guide

Arabic reads right to left, so the eye enters a screen from the right and moves left and down. Navigation, steppers, carousels, tables and forms follow that flow. Mirror the structure first, then check the hierarchy: the primary action and the most important content should sit where the eye lands first.

Components that depend on spatial order, such as timelines, sliders and charts, need a decision each. Many Arabic products mirror a chart's time axis and others keep it; either can work if it is consistent and tested with real users.

Mirror anything that expresses direction or sequence:

• Back and forward arrows, chevrons and breadcrumbs separators
• Progress bars, steppers and onboarding flows
• Side navigation, drawers and sheets that slide in from an edge
• Text alignment, list bullets, and label positions in forms

Usually keep, or decide case by case, things that are not directional in meaning:

• Logos and brand marks
• Clocks, checkmarks and phone keypads
• Media playback icons, because they describe time rather than reading direction
• Phone numbers, codes and other number runs, which stay left to right inside Arabic text

Follow the platform's own guidance where it exists, and write the rule down in the design system so engineers do not guess.

Arabic letters join and change shape by position, so the typography rules differ from Latin:

• Do not add letter-spacing: it breaks the joins between letters
• Avoid italics and faux bold; choose a family that ships real weights
• Give Arabic more line height than Latin, often 1.5 to 1.8, because of tall letters and diacritics
• Arabic often needs a slightly larger size than Latin at the same visual weight; test at body sizes on real devices
• Avoid justified text and never truncate in the middle of a word

Pick a family designed for interfaces, such as IBM Plex Sans Arabic, Noto Sans Arabic, Cairo or Tajawal, and pair it with a Latin companion that matches its x-height and weight so mixed text looks like one voice.

Western digits (0 to 9) and Arabic-Indic digits are both used, and the right choice depends on the market and the product. Choose one per product, apply it everywhere, including notifications and emails, and offer a setting where it matters.

Amounts, phone numbers and codes are left-to-right runs inside right-to-left text, so the surrounding punctuation and currency symbol can land in the wrong place unless the direction is set explicitly. Use locale-aware formatting rather than hand-built strings, and decide per market whether dates use the Gregorian calendar, the Hijri calendar or both.

Arabic interfaces constantly contain Latin: brand names, emails, URLs, product codes. The bidirectional algorithm can move punctuation to the wrong side of such a run.

• Set lang and dir on containers, not only on the page
• Use dir="auto" for user-generated content and <bdi> around inserted names
• Test punctuation at the end of lines and next to numbers
• Keep email, phone and URL inputs left to right even in an Arabic form

Modern Standard Arabic, Egyptian, Gulf and Levantine Arabic read differently. Decide the voice for the product and audience, write for it directly instead of translating English, and have a native speaker review every flow.

Arabic strings are often longer than English ones, and verbs and pronouns can be gendered. Leave flexible widths for buttons and labels, and prefer neutral phrasing when the user's gender is unknown.

Align labels and fields to the right, keep placeholders and validation messages in the same direction as the field, and set the keyboard type for numbers. Names may be entered in Arabic or Latin script, so do not validate them against one alphabet. Address and phone formats should follow the market, not the template.

• Use logical CSS properties such as margin-inline-start and padding-inline instead of left and right
• Set dir at the root and let components inherit it
• Flip directional icons deliberately, with a rule for which ones
• Define a font stack with an Arabic family and a fallback, and test font loading
• Test both directions with real content, long strings and mixed text, ideally in visual regression

• Reading order and hierarchy checked, not only mirrored
• Directional icons and progress indicators flipped; brand marks and clocks kept
• No letter-spacing, italics or justified Arabic text
• Line height and size tested at body sizes
• One numeral system, locale-aware formatting for dates and currency
• Latin names, emails and URLs inside Arabic text render correctly
• Voice and dialect chosen and reviewed by a native speaker
• Forms aligned, with left-to-right inputs where needed
• Logical CSS properties and dir set at the root
• Both directions tested with real, long and mixed content