Right-to-left Adaptation

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 adapting the mockup 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 reflect the mockup and a client will be happy. But in the right-to-left languages there are a lot of nuances and microrules, 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 adaptation to Hebrew - DOKKA

 

 

Symbols and text

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 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, the 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 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 RTL-languages.

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.

Localize the dates. 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.

Another tip not only for RTL, but for multi-lingual sites 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 you should place there 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:

·  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

Calendar. 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

 

Problems when working with an RTL mockup

In addition to the visual subtleties, there was one significant technical challenge. 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 RTL interfaces

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 it should be the other way around.

 

 

While working on the project, we wondered where to put the percent sign arose. 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 mockup adaptation for RTL easily. Besides, seeing your mockup in a mirror-like way is a good training for your brain :)

 

But still, our main advice - if you have some doubts, ask the native user.