The sidebar stays on the left. A back arrow points the wrong way. A phone number scrambles and a chart tells time backwards. A product that was built in English and then translated into Arabic breaks in small ways like these, and Arabic readers notice every one.
For product and design leads at SaaS companies serving the Gulf and wider Middle East. You will learn what to mirror in a right to left interface and what to leave alone, how to handle Arabic type and numerals, how to set it up in code and what to check before launch.
Key takeaways
Design for right to left from the start. Retrofitting mirrors every mistake.
Mirror layout and direction. Do not mirror brand marks, media controls, most numbers or things that are not about direction.
Use logical properties in code, such as start and end, instead of left and right.
Set type for Arabic on its own terms: font, size, line height and no letter spacing.
Test with Arabic speakers on real data, including mixed text with English words and numbers.
What does Arabic and English bilingual SaaS UI design involve?
Bilingual UI design means one product that works fully in a left to right language and a right to left language, with the user able to switch. It covers layout direction, typography, content, numbers and testing.
Arabic is written right to left, so the reading order, the flow of a page and many directional icons reverse. The structure of the product stays the same. The way it is arranged, and how text is shaped, changes.
Design systems that support it, such as Cloudscape, document RTL as a first class setting. W3C’s internationalization guidance explains how markup should declare direction and language so browsers handle text correctly.
What is the Mirror Map?
The Mirror Map sorts interface elements into three groups: mirror it, keep it and decide it. Use it as a review sheet for every screen.
Group | Elements | Why |
|---|---|---|
Mirror | Page layout, sidebar position, navigation order, text alignment, progress bars, back and forward arrows, list indents, form label placement | Reading order and flow reverse |
Keep | Logos and brand marks, media play and rewind controls, most clocks, phone numbers and code, photos | They are not about reading direction |
Decide | Numerals, charts with time on the x axis, icons with ambiguous direction, sliders | Practice varies; test with users |
Apple’s Human Interface Guidelines describe right to left support as reversing the interface to match the reading direction of the script. The table above is our own working list of what that means in practice, so treat it as a starting point and test it with Arabic speaking users.
Also read: How to Hire a Design Studio in India as a US SaaS Startup
How do you set up RTL in code?
Declare language and direction, then use logical properties so one stylesheet serves both directions.
Set the document language and direction, for example lang=”ar” and dir=”rtl” on the html element, and switch them with the language.
Use CSS logical properties, such as the inline start margin and the inline end padding, instead of left and right.
Use flexbox and grid, which follow direction automatically.
Wrap user generated text of unknown direction in the bdi element or set dir=”auto” so mixed content does not scramble.
Flip only directional icons, and keep a separate flag for icons that should not flip.
W3C and Mozilla document these techniques. Doing it in code early is far cheaper than patching each component after launch.
Pro tip: Add an RTL toggle to your design and development tools on day one, and make it part of every pull request review. Bugs found in review cost minutes. Bugs found by a customer cost trust.
How should you handle Arabic typography?
Choose a font made for Arabic, increase line height and never add letter spacing. Arabic letters connect, and spacing breaks the joins.
Topic | Guidance |
|---|---|
Font | Use a typeface designed for Arabic UI, and test pairing with your Latin font |
Size | Arabic often needs a slightly larger size than Latin text to read comfortably |
Line height | Allow more room for diacritics and taller forms |
Letter spacing | Keep at zero; do not stretch Arabic with tracking |
Italics and capitals | Arabic has neither, so do not simulate italics |
Weight | Check heavy weights for legibility at small sizes |
Pair fonts by visual weight and x height so a mixed line looks even. Test headings, buttons and table cells, where fit is tightest.
How do you handle numbers, dates and currency?
Ask your users which numerals they expect, and make it a setting if the market is mixed. Arabic users in different countries and contexts are used to either Western digits (0 to 9) or Eastern Arabic digits.
Dates, calendars and currency also vary. Some markets use the Gregorian calendar for business and the Hijri calendar for personal use. Use your platform’s internationalization library for formatting instead of building strings by hand.
Mixed content needs care. A line with Arabic text, an English product name and a number must keep each in the right order. This is where the bdi element and the Unicode bidirectional algorithm matter, and where testing with real strings pays off.
How do you translate the content, not just the words?
Write Arabic content with Arabic speaking writers, not word for word translation. Tone, formality and phrasing differ from English, and UI strings that read well in English can feel stiff or wrong in Arabic.
Give translators context: where a string appears and what it does.
Avoid string concatenation. Word order differs, so use full sentence templates with placeholders.
Allow for text length change in buttons, tabs and tables.
Review with native speakers in the real interface, not in a spreadsheet.
Marketing pages need the same care. Headlines and calls to action should be written for Arabic readers, not translated from an English page.
What are the most common bilingual SaaS UI mistakes?
Retrofitting RTL after launch. Every component needs rework.
Mirroring everything. Logos, media controls and phone numbers should not flip.
Using left and right in CSS. Logical properties avoid duplication.
Adding letter spacing to Arabic. It breaks the letter joins.
Translating word by word. The UI reads as foreign.
Testing only with placeholder text. Real mixed strings expose the bugs.
How do you QA an Arabic and English product?
Run this checklist on each screen, in both directions, at desktop and phone width.
Layout mirrors, including nav, tables, forms and modals.
Directional icons flip; brand marks and media controls do not.
Text aligns to the start edge and wraps cleanly.
Mixed Arabic, English and numbers stay in the right order.
Numerals, dates and currency follow user settings.
Fonts load, line height holds, no clipped diacritics.
Charts, progress and sliders behave as users expect.
An Arabic speaker completes the main task without help.
Pro tip: Keep a bank of ten ugly test strings: a long Arabic name, a company name in Latin letters, a phone number, a price, a URL. Paste them into every new component.
Also read: AI SaaS Dashboard Design Examples: Lessons From Our Nura and ORYN Dashboards, Onboarding and Empty States for AI Tools: How to Get Users to a First Win, AI Landing Page Design: Examples and Lessons From Three Pages We Designed.
To see our approach to complex product interfaces, read our Nura healthcare platform dashboard case study, or browse all of our case studies.
Keep reading: AI SaaS Dashboard Design Examples: Lessons From Our Nura and ORYN Dashboards, Onboarding and Empty States for AI Tools: How to Get Users to a First Win and How to Hire a Design Studio in India as a US SaaS Startup
Is your product ready for Arabic readers?
Send us a screen and we will mark what to mirror, what to keep and what to test. Book a design review · See our work
Arabic English SaaS UI FAQs
Right to left design arranges the interface so it reads from right to left for languages such as Arabic and Hebrew. Layout, navigation and directional icons mirror, while brand marks, media controls and many numbers stay as they are. It also covers type, content and testing.
Mirror layout, sidebar position, navigation order, text alignment, progress indicators and arrows that express direction. Do not mirror logos, media play controls, phone numbers, code or photos. For numerals and time based charts, test with users in your target market.
Set dir="rtl" and lang="ar" on the document, use logical properties for inline start and end instead of left and right, rely on flexbox and grid, and wrap mixed direction user text in the bdi element. A single stylesheet then serves both directions.
It depends on the market and the audience. Many users are comfortable with Western digits, while others expect Eastern Arabic digits. Ask your users and offer a setting if your audience is mixed. Use your platform’s formatting library for dates and currency.
Kraftbase works with teams in the UAE as well as the US and India. Kraftbase is a product messaging and UI/UX design studio for AI and B2B SaaS companies. Ask us about your languages and we will say plainly what we cover and what needs a native reviewer.
Not on its own. It can speed a first pass, but tone, formality and phrasing need review by native Arabic speakers in the real interface. Avoid string concatenation, give translators screen context and test with mixed Arabic and English strings.
At the start of design if you serve Arabic readers, or as early as you can. Retrofitting means reworking every component and fixing layout assumptions in code. Using logical properties and a design system with RTL support makes the work much smaller.
About the author
Aneri is a designer at Kraftbase, a product messaging and UI/UX design studio in Vadodara, India, that helps AI and B2B SaaS teams in the US, UAE and India explain and design what they’ve built.
Sources
Internationalization best practices, W3C (w3.org/International)
Mirror Map: Kraftbase framework, not a published standard
Design review
Is your product ready for Arabic readers?
Send us a screen and we will mark what to mirror, what to keep and what to test.
The sidebar stays on the left. A back arrow points the wrong way. A phone number scrambles and a chart tells time backwards. A product that was built in English and then translated into Arabic breaks in small ways like these, and Arabic readers notice every one.
For product and design leads at SaaS companies serving the Gulf and wider Middle East. You will learn what to mirror in a right to left interface and what to leave alone, how to handle Arabic type and numerals, how to set it up in code and what to check before launch.
Key takeaways
Design for right to left from the start. Retrofitting mirrors every mistake.
Mirror layout and direction. Do not mirror brand marks, media controls, most numbers or things that are not about direction.
Use logical properties in code, such as start and end, instead of left and right.
Set type for Arabic on its own terms: font, size, line height and no letter spacing.
Test with Arabic speakers on real data, including mixed text with English words and numbers.
What does Arabic and English bilingual SaaS UI design involve?
Bilingual UI design means one product that works fully in a left to right language and a right to left language, with the user able to switch. It covers layout direction, typography, content, numbers and testing.
Arabic is written right to left, so the reading order, the flow of a page and many directional icons reverse. The structure of the product stays the same. The way it is arranged, and how text is shaped, changes.
Design systems that support it, such as Cloudscape, document RTL as a first class setting. W3C’s internationalization guidance explains how markup should declare direction and language so browsers handle text correctly.
What is the Mirror Map?
The Mirror Map sorts interface elements into three groups: mirror it, keep it and decide it. Use it as a review sheet for every screen.
Group | Elements | Why |
|---|---|---|
Mirror | Page layout, sidebar position, navigation order, text alignment, progress bars, back and forward arrows, list indents, form label placement | Reading order and flow reverse |
Keep | Logos and brand marks, media play and rewind controls, most clocks, phone numbers and code, photos | They are not about reading direction |
Decide | Numerals, charts with time on the x axis, icons with ambiguous direction, sliders | Practice varies; test with users |
Apple’s Human Interface Guidelines describe right to left support as reversing the interface to match the reading direction of the script. The table above is our own working list of what that means in practice, so treat it as a starting point and test it with Arabic speaking users.
Also read: How to Hire a Design Studio in India as a US SaaS Startup
How do you set up RTL in code?
Declare language and direction, then use logical properties so one stylesheet serves both directions.
Set the document language and direction, for example lang=”ar” and dir=”rtl” on the html element, and switch them with the language.
Use CSS logical properties, such as the inline start margin and the inline end padding, instead of left and right.
Use flexbox and grid, which follow direction automatically.
Wrap user generated text of unknown direction in the bdi element or set dir=”auto” so mixed content does not scramble.
Flip only directional icons, and keep a separate flag for icons that should not flip.
W3C and Mozilla document these techniques. Doing it in code early is far cheaper than patching each component after launch.
Pro tip: Add an RTL toggle to your design and development tools on day one, and make it part of every pull request review. Bugs found in review cost minutes. Bugs found by a customer cost trust.
How should you handle Arabic typography?
Choose a font made for Arabic, increase line height and never add letter spacing. Arabic letters connect, and spacing breaks the joins.
Topic | Guidance |
|---|---|
Font | Use a typeface designed for Arabic UI, and test pairing with your Latin font |
Size | Arabic often needs a slightly larger size than Latin text to read comfortably |
Line height | Allow more room for diacritics and taller forms |
Letter spacing | Keep at zero; do not stretch Arabic with tracking |
Italics and capitals | Arabic has neither, so do not simulate italics |
Weight | Check heavy weights for legibility at small sizes |
Pair fonts by visual weight and x height so a mixed line looks even. Test headings, buttons and table cells, where fit is tightest.
How do you handle numbers, dates and currency?
Ask your users which numerals they expect, and make it a setting if the market is mixed. Arabic users in different countries and contexts are used to either Western digits (0 to 9) or Eastern Arabic digits.
Dates, calendars and currency also vary. Some markets use the Gregorian calendar for business and the Hijri calendar for personal use. Use your platform’s internationalization library for formatting instead of building strings by hand.
Mixed content needs care. A line with Arabic text, an English product name and a number must keep each in the right order. This is where the bdi element and the Unicode bidirectional algorithm matter, and where testing with real strings pays off.
How do you translate the content, not just the words?
Write Arabic content with Arabic speaking writers, not word for word translation. Tone, formality and phrasing differ from English, and UI strings that read well in English can feel stiff or wrong in Arabic.
Give translators context: where a string appears and what it does.
Avoid string concatenation. Word order differs, so use full sentence templates with placeholders.
Allow for text length change in buttons, tabs and tables.
Review with native speakers in the real interface, not in a spreadsheet.
Marketing pages need the same care. Headlines and calls to action should be written for Arabic readers, not translated from an English page.
What are the most common bilingual SaaS UI mistakes?
Retrofitting RTL after launch. Every component needs rework.
Mirroring everything. Logos, media controls and phone numbers should not flip.
Using left and right in CSS. Logical properties avoid duplication.
Adding letter spacing to Arabic. It breaks the letter joins.
Translating word by word. The UI reads as foreign.
Testing only with placeholder text. Real mixed strings expose the bugs.
How do you QA an Arabic and English product?
Run this checklist on each screen, in both directions, at desktop and phone width.
Layout mirrors, including nav, tables, forms and modals.
Directional icons flip; brand marks and media controls do not.
Text aligns to the start edge and wraps cleanly.
Mixed Arabic, English and numbers stay in the right order.
Numerals, dates and currency follow user settings.
Fonts load, line height holds, no clipped diacritics.
Charts, progress and sliders behave as users expect.
An Arabic speaker completes the main task without help.
Pro tip: Keep a bank of ten ugly test strings: a long Arabic name, a company name in Latin letters, a phone number, a price, a URL. Paste them into every new component.
Also read: AI SaaS Dashboard Design Examples: Lessons From Our Nura and ORYN Dashboards, Onboarding and Empty States for AI Tools: How to Get Users to a First Win, AI Landing Page Design: Examples and Lessons From Three Pages We Designed.
To see our approach to complex product interfaces, read our Nura healthcare platform dashboard case study, or browse all of our case studies.
Keep reading: AI SaaS Dashboard Design Examples: Lessons From Our Nura and ORYN Dashboards, Onboarding and Empty States for AI Tools: How to Get Users to a First Win and How to Hire a Design Studio in India as a US SaaS Startup
Is your product ready for Arabic readers?
Send us a screen and we will mark what to mirror, what to keep and what to test. Book a design review · See our work
Arabic English SaaS UI FAQs
Right to left design arranges the interface so it reads from right to left for languages such as Arabic and Hebrew. Layout, navigation and directional icons mirror, while brand marks, media controls and many numbers stay as they are. It also covers type, content and testing.
Mirror layout, sidebar position, navigation order, text alignment, progress indicators and arrows that express direction. Do not mirror logos, media play controls, phone numbers, code or photos. For numerals and time based charts, test with users in your target market.
Set dir="rtl" and lang="ar" on the document, use logical properties for inline start and end instead of left and right, rely on flexbox and grid, and wrap mixed direction user text in the bdi element. A single stylesheet then serves both directions.
It depends on the market and the audience. Many users are comfortable with Western digits, while others expect Eastern Arabic digits. Ask your users and offer a setting if your audience is mixed. Use your platform’s formatting library for dates and currency.
Kraftbase works with teams in the UAE as well as the US and India. Kraftbase is a product messaging and UI/UX design studio for AI and B2B SaaS companies. Ask us about your languages and we will say plainly what we cover and what needs a native reviewer.
Not on its own. It can speed a first pass, but tone, formality and phrasing need review by native Arabic speakers in the real interface. Avoid string concatenation, give translators screen context and test with mixed Arabic and English strings.
At the start of design if you serve Arabic readers, or as early as you can. Retrofitting means reworking every component and fixing layout assumptions in code. Using logical properties and a design system with RTL support makes the work much smaller.
About the author
Aneri is a designer at Kraftbase, a product messaging and UI/UX design studio in Vadodara, India, that helps AI and B2B SaaS teams in the US, UAE and India explain and design what they’ve built.
Sources
Internationalization best practices, W3C (w3.org/International)
Mirror Map: Kraftbase framework, not a published standard
Design review
Is your product ready for Arabic readers?
Send us a screen and we will mark what to mirror, what to keep and what to test.