Right-to-left App Localization: What You Need to Know

The world of Latin and Cyrillic alphabets seems to be so familiar. You know intuitively where the call to action should be, how to place captions to the input fields and...

Suddenly! The task of mobile app localization to Hebrew comes into your life. Your left-to-right world changes to the right-to-left world.

You must be thinking that there is nothing difficult about this project. You just need to mirror the mockup and a client will be happy. But in the right-to-left languages there are a lot of nuances and micro rules, which were not so easy to find and had to be put together one by one. In this article we will tell you what we have learned during our project with Hebrew app design - DOKKA.

 

 

 

Symbols and writing

 

Let's start with the terminology.

Left-to-Right (LTR) is a writing system where writing starts from the left of the page and continues to the right. For example, Cyrillic and Latin alphabets that are common for us.

Right-to-Left (RTL) is a writing system where writing starts from the right of the page and continues to the left. The most widespread right-to-left languages are Arabic, Hebrew, and Persian. 

There is also a Bidirectional (BIDI) text that contains writing from left to right and from right to left. Hebrew fits this description because it uses the European digits we are used to, and they are written from left to right.

 

Image from behance.net

 

 

The Hebrew language also has its own numerals, but they are mainly used in religious texts. So, European numerals are more common, whereas Roman numerals should be avoided at all.

Depending on the headset, the display of symbols may differ. For us, these differences can be invisible, but not for the native users. Firstly, it is necessary to choose the right font, and secondly, to test it with users. 

For example, fonts can be picked up on codepen.io or right on fonts.google.com

And of course, the text is right-aligned by default. Centered text is also acceptable.

The letters of the Arabic alphabet differ in width from those in the Latin alphabet, which creates a visual difference on the site. So, don't forget to test "bottlenecks" such as input fields, where there is a chance that the entire text will not fit. Our advice is to leave a little more horizontal space for mobile application localization to RTL.

Arabic names were historically based on a long naming system. Their structure is the given name, a patronymic or series of patronymics and the family name. For such cases, three fields should be provided.

 

 

Dates localization

 

This applies not only to the RTL, but also to the date format in general, which may vary from country to country. If you are not sure about it, better check.

It is better to reflect the calendar, but not all sites do it, which is proved by two examples below:

 

Images from bac.org.il and cdb.org.il

 

Another tip not only for RTL, but for multilingual sites and apps localization in general. Make the choice of language simple and understandable for users:

 

Image from dribbble.com

 

 

Mockup

 

The most important thing to understand is that RTL users scan the page from the top right corner, so there you should place the information you find important. But usually the LTR-mockup is prepared at first, and then it is adapted to RTL. There shouldn’t be any problems with text, but there could be some with images. It is also important to adapt them to the RTL-users. If important information is on the left side of the image, then make a new reflected version of it.

 

Image from priority-software.com

 

How to turn an LTR mockup into an RTL during the right-to-left app localization:

·  place text fields and icons on the opposite side;

·  put the navigation buttons in the opposite order;

·  reflect icons that indicate the direction (e.g., arrows);

·  align text right.

No need to reflect:

·  icons that do not have direction indication (e.g., camera);

·  numbers and hours;

·  graphs;

·  objects that are held in the right hand (such as mugs or magnifying glasses), because they are not relevant to the direction, but only refer to the fact that most people are right-handed.

To learn more about what icons to reflect, you can read in the Material Design guides

 

 

Difficulties when working with an RTL mockup

 

In addition to the visual subtleties, there was one significant technical challenge. DUring the Hebrew app design it turned out that when inserting the Hebrew text into graphic editors like Sketch and Figma, the symbols go in the opposite order. Sketch had solved the problem by then and added automatic adaptation, but in order to insert Hebrew text into Figma, you have to mess around and use the Reverse Text Generator, such as textmechanic.com 

 

 

Examples of interfaces in right-to-left languages

 

Now let's focus on what the sites in Hebrew look like.

This is what the Microsoft site looks like:

 

 

Let's look at the upper left corner. Designers have correctly adapted the button - the icon and the direction of the animation on it point to the left. You could argue about the reflected magnifying glass icon, but it looks the same in the English version of the site. Whereas the icon of the trolley could have been reflected, so as it indicates the direction from left to right. 

On this site the news feed moves from right to left, and the chat opens at the bottom left:

 

 

This example shows how the elements should function properly, but there is nothing much beautiful here. Now let's have a look at more visually pleasing pages.

On Annanuna website the video motion is right-to-left. Headings are on the right. Illustrations are ideally chosen. A sight for sore eyes:)

 

 

But look at the other page of this site. Here, according to the rules, icons indicating the direction should be reflected. And the logos at the bottom of the page move from left to right, but in right-to-left languages localization it should be the other way around.

 

 

While working on the Hebrew app design, we wondered where to put the percent sign. The correct answer you can see in the picture:

 

Image from tzina.space

 

On createmagazine.co.il you can see an example of proper pagination

 

 

Here is an interesting example of filling in the fields from left to right on int-college.co.il

 

It should be noted separately that most of the analyzed sites have a mode for people with disabilities. That’s very thoughtful.

 

 

Conclusion

 

Hopefully, these tips will help you to cope with the right-to-left app localization easily. Besides, seeing your mockup during the website or mobile app localization in a mirror-like way is good training for your brain :)

But still, our main advice - if you have some doubts, ask the native user and use professional design services.

contacts image

Got a project in mind? We’d love to hear what matters to you

Contact us