Published on | Prototyping: From UX to Front End — Medium Alan Sien Wei Hshieh

A quick guide to making sure your app supports bi-directionality

As designers and engineers, we spend hours agonizing over how our applications are laid out, how our glyphs look, and how text flows throughout our UIs. However, without right-to-left support, our apps might be totally backwards to a significant percentage of users around the world.

While this screenshot of YouTube may look backwards to LTR users, YouTube mostly supports RTL properly.

Sadly, many apps out don’t have proper right-to-left (RTL) support, and if they do, it’s placed as a very low on the development priority list. Not supporting RTL can totally break a user experience: controls are out of place, text becomes illegible, and gestures seem to go in reverse.

What’s the point of pouring so much effort into designing a UI, when for many people, it will be totally backwards? What’s the point of using an app if the developers don’t care enough about you to support your language?

Our apps should be bi-directional — providing great user experiences to everyone, agnostic of RTL or LTR.

What is RTL, really?

The majority of major world languages are either flow from left-to-right (LTR), such as English, or from right-to-left (RTL), such as Hebrew. Some languages are traditionally RTL, but have adopted LTR in software applications and short-form documents. For example, Chinese in textbooks tends to be written RTL, with characters also flowing top-to-bottom. However, on the web, most Chinese is written LTR. Often, in Chinese-speaking countries, you’ll find building and monument names that flow from RTL, but not top-to-bottom.

“Nintendo” written in Japanese kanji, in LTR and in RTL. In RTL, the first character in the three-character name starts on the right. In LTR, the first character starts on the left. Depending on context, you may see “Nintendo” written either way walking around southern Japan.

For your apps, what languages do we have to worry about? Well, it’s more about the script than the language. Azeri may be written using Arabic or Latin scripts. The prior is written RTL and the latter is written LTR. Here are common, current scripts that are RTL:

Hebrew alphabet
Perso-Arabic script
Syriac alphabet
many others…

The Hebrew alphabet is used for Hebrew and Yiddish, whereas Perso-Arabic script is used in Arabic,Persian, Urdu, Pashto, and even parts of China.

Thankfully, whatever system we’re developing for generally will set users’ UIs to LTR or RTL automatically based on locale. As a result, our job is to make sure that when we do support RTL, it is supported properly.

General rules for supporting RTL

Usually, apps displayed in RTL display all their content from right-to-left. For example, on the iOS lockscreen, the signal-strength indicator is mirrored for RTL, and control placement is mirrored as well.

In RTL:

Sentences in the RTL script read from right-to-left. LTR script mixed into RTL script is still shown LTR (such as numbers).
Control layout and gestures are mirrored. Controls that are usually left-aligned should now be right-aligned. Glyphs in text fields are placed on the other side of the text field. If you swipe from the left-edge of the screen in LTR, you’ll need to swipe from the right-edge of the screen in RTL.
Icons and glyphs are selectively mirrored. If a glyph shows motion or directionality of text, it should be mirrored. Represented objects that are not mirrored in real life, should not be mirrored.
Passage of time flows from right to left. Timelines should usually be mirrored. (The exception is playback controls and progress bars).

Mirroring text and layout

A common mistake is thinking that in RTL languages, all text should flow from right-to-left. While this is mostly true, modern text inevitably contains a mixture of scripts. For example, a news article in Arabic may mention “Facebook”, which should always be displayed in LTR i.e., not as “koobecaF”. Follow the below guidelines when trying to figure out how to mirror text or layout:

Mirror layout, but not necessarily the elements in the layout. Items should be horizontally mirrored as if you had taken a layout and placed a physical mirror to the side of it. However, in most cases, the elements themselves should not be mirrored.
Right-handed controls should remain on the right. Commonly accessed controls, such as + buttons, are often placed in the bottom-right of the screen for easy access for right-handed users. Depending on it’s importance, it may be acceptable to keep such controls on the right-side of the screen.
Allow the non-RTL script to be displayed LTR, but still lay it out inline with the RTL script, with right-alignment, if applicable.
Display numbers in LTR order. Many numbers are displayed using Latin script (i.e., 0123456789). Show these in LTR. Eastern Arabic numerals (i.e., ٠١٢٣٤٥٦٧٨٩) and their Perso-Arabic and Urdu variants are also shown LTR.
Persist RTL reading order, despite LTR text. If you are displaying a glyph before a label, make sure that in RTL, the glyph is still shown before the label, i.e., to the right of the label.
“Technical text” is shown in LTR. URLs are written in LTR. If you’re designing an IDE, note that software developers still write code in LTR the majority of the time.

Select portions of the Safari chrome are mirrored in right-to-left (RTL) locales vs. left-to-right (LTR) locales. Note that even back buttons are mirrored.

Mirroring Icons

Mirroring icons is tricky because of a large number of edge cases. Most of the time follow the below guidelines:

Mirror glyphs if they are showing directionality or motion. Directionality also applies towards represented text. For example, if a glyph shows a book with LTR text, the text portion of the glyph needs to be updated to show RTL text instead.
Mirror audio glyphs. Since speakers show directional audio, audio glyphs should be flipped.
Don’t mirror photographs. People in RTL locales still see the world in the same direction as the rest of us.
Don’t mirror playback glyphs and progress bars. Glyphs for playback are still shown LTR. Progress bars should still flow from the left to the right.
Don’t mirror glyphs representing objects held in the hand. In RTL locales, the majority of users still are right-handed. As a result, glyphs of objects held in the hand, such as pencils or magnifying glasses, should not be mirrored.
Don’t mirror glyphs with circular motion. Refresh buttons do not need to be mirrored.
Don’t mirror slashes. Akin to objects held in the hand, slashes are usually done from top-to-bottom, left-to-right, in RTL locales.
Maintain directionality of text in glyphs. If one of your glyphs shows some text, that text needs to remain legible. As a result, make sure the text uses the proper directionality. In many cases, this requires that designers cut multiple glyphs.
Don’t mirror glyphs that are already bi-directional. This seems obvious, but if a glyph already looks the same when mirrored horizontally, don’t mirror it. This adds up and degrades performance.

To be more concrete, here are some examples:

The Reader button in Safari should be flipped because it shows theoretical text layout.Dining utensils should not be flipped because most users are right-handed.The Yelp “half-star” should be flipped because the star is filling up from left-to-right, making it directional.

RTL is hard

Unless you are very familiar with an RTL script, figuring out when to mirror can be very difficult. Even seasoned developers who natively speak Arabic may run into issues figuring what direction a glyph can face.

Despite it’s difficulty, making sure apps display correctly in RTL locales is an effort worth undertaking. Arabic is the 5th most used language in the world, with over 420 million speakers. There are also over 100 million speakers of Urdu, and over 9 million speakers of Hebrew. As designers and developers, we shouldn’t just leave hundreds of millions of users behind.

Try some of the guidelines above. Find a native Hebrew speaker to better understand when to mirror and when to not. Set your system language to Urdu to make sure everything still makes sense.

Don’t be backwards.

hshieh.com | @chunggukpanda

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Don’t be backwards was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Don’t be backwards

Cool stuff, every week

More Articles