Fundamentals of Right to Left UI Design for Middle Eastern Languages
The Blackboard design team has been working closely with development to prepare our product for Middle Eastern localization. The Middle East is a growing market that requires specialized changes because reading and writing is done from right to left (RTL). Through our research and interviews we have created a list of guidelines to follow when designing for RTL. This is by no means an exhaustive set of rules, but it’s a good beginners guide for getting started.
It’s important to understand that designing for RTL is not just an edge-case. Arabic is the fourth most popular language in the world. While only 5% of online content is in Arabic, 60% of Arabic speakers would prefer to browse content in Arabic. That figure jumps to 97% when polling just Saudis.
Arabic and English are very different for a number of reasons, beginning with the alphabet. The Arabic alphabet has 28 letters, compared to English’s 26. Additionally, not all words can be translated directly from Arabic to English and results in some words translating into long descriptive phrases. However, when words do translate directly, Arabic words are typically shorter than English words. This is something to keep in mind as you’re designing.
The first step in adjusting for RTL is flipping the entire web page, but it’s not as easy as that. I’ve broken this article into five sections to cover the basics you’ll need to get started.
- Font Size — Because Arabic typefaces tend to render text smaller, all fonts should be increased about 3 points.
- Direction based on language — Characters or words that are written in LTR languages don’t need to be mirrored but may need to be localized.
- Noto Sans — This Google typeface has been highly recommended by multiple sources as a good one to use for Arabic type. It’s clean, legible and takes into consideration the unique needs of Arabic text.
- Arabic words are shorter — Most words are shorter in Arabic than in English, which means things could start to shift when translated. Be sure to review alignment after translating.
- The direction depends on the language — Any time Arabic is used it will always appear RTL. However there are instances where English (or other LTR languages) texted will be mixed in amongst Arabic. In those cases the LTR language text will always appear left to right.
- Western vs. Eastern Arabic Numerals — While Eastern Arabic numerals (“English” numbers) are known and used, Middle Easterners primarily use the Western Arabic numerals.
- Numbers don’t change direction — Under no circumstances are “English” numbers flipped. This includes both the number itself and the order of the numbers. So a phone number will still appear in the LTR format with no changes. Even if you are listing out a number that is mixed with letters or characters, numbers always appear left to right. For example, something like A58B265 would stay exactly the same in LTR and RTL.
- Dates — Dates do not change direction either. It gets more complicated when it comes to dates but we’ll cover that in the calendar section.
- Other Numerals — There are other RTL localizations that use different numerals, such as Bengali, Marathi and Nepali.
- Hijri vs. Gregorian Calendar — The Arabic Hijri calendar is primarily used in Saudi Arabia. While they still acknowledge and follow the Gregorian calendar to some extent, many publications and sites use the Hijri. Some sites like Saudia Airlines allows the display of both Gregorian and Hijri at the same time. There is also a Persian and Hebrew calendar. You will need to make specific calendar changes based on who you are localizing for.
- Work Week — The Saudi work week runs from Sunday to Thursday, with Friday and Saturday being the weekend. As a result, all Saudi calendars start on Sunday. This is not necessarily the case across the entire Middle Eastern region, though starting the calendar on Sunday is common throughout the United States.
- RTL vs. LTR Calendars — Whether it’s the Hijri or Gregorian calendar, if it’s written in English (with “English” numbers) the calendar displays LTR. However if it is in Arabic, the calendar flips and is displayed RTL. Sometimes the calendar will be in Arabic but still use “English” numbers. In those cases the calendar is still RTL.
- Directionals — Any kind of directional flips right to left. This includes arrows, progress bars, dropdown arrows and checkmarks. Dropdown arrows will still face downward but will be placed on the left hand side of the dropdown menu.
- Logos and Trademarks — Logos and trademarks do not flip, but they do switch location. So if a logo is typically in the upper left, it will move to the upper right.
- Media Controls — Media controls like playback buttons and media progress indicators always run LTR. This is because media controls are reflecting the way a cassette players rolls the tape in a cassette. So elements containing a play/pause/stop button will never flip.
- Scroll Bars — Scroll bars within UI and within the browser will flip to be on the left.
- Slashes — Any time a slash appears it will not flip. This is true in both text and iconography.
- Flipping icons — Icons will need to be flipped as well to account for RTL. Icons like books, journals and paper will need to be flipped to indicate the direction text is read in. But there are some that won’t need to flip because the indicate directionality and right handedness.
- Directionality — Icons that show directionality (like clocks) should not be flipped.
- Right handedness — Because the majority of people around the world are right handed, icons should still be oriented to reflect this. Some examples of these icons are search, pen/pencil or a mug.
- Slashes — Sometimes icons appear with slashes. In these instances, the icon may flip but the slash does not.
There are many small details that need to be accounted for when designing for RTL. And every product will have their own unique needs, so it’s important to talk with native speakers and SME’s if you have the opportunity. If you have more questions about designing for RTL please feel free to reach out!