Hebrew, Arabic, Farsi and Urdu: the challenges of localizing right-to-left UIs

Localizing any content into any language is always a challenging task. Indeed, you need to keep many things to keep in mind before, during and after the process. However, beyond the strong cultural aspect involved, some languages can be more challenging than others and localizing content, and especially user interfaces, into right-to-left languages can bring some challenges. 

The Internet and the lack of language diversity

When dealing with language diversity, it is no surprise that the internet is not doing well. Let’s take the example of Arabic, which is the 5th most spoken language in the world with over 319 million native speakers around the globe and yet, still in 2019, it only represents 5.2% of the web content available. This lack of diversity can be explained by English being the lingua franca all around the world, but compared to other widely spoken languages such as Chinese, Arabic is still quite misrepresented online. 

The reasons behind the misrepresentation of RTL (right-to-left) languages online

Let’s take the example of another language: Chinese. This language used to be read from top to bottom and can now also be read and understood in a left-to-right format, which is the one used by most languages. And today, Chinese represents more than 19% of the content available online.

Even though the population of Chinese-speaking users is one of the biggest online, you can still deduce that localizing into RTL languages represents a big challenge that requires extra steps and preparation.

Difficulties and things to keep in mind when localizing RTL languages

Creating and designing UIs into RTL languages only is simple. However, when bi-directionality (multilingual content in both reading directions) is involved, things get more difficult. 

Design issues

Standard Arabic Wikipedia page

Keep in mind that not only the direction of the text changes. The whole page needs to be read in a different direction.
This implies that all the interface needs to be either flipped over or mirrored. It includes text, tables, breadcrumbs, icons, visuals, and even slide shows. This step is called mirroring. 

Text itself can be easily flipped over with the help of tools such as CSS Janus, which can convert any left-to-right CSS stylesheet into the opposite direction. However, when dealing with elements such as menus, things get more complicated. Indeed, you need to make sure your CMS and/or your theme is RTL compatible. 

If you are using WordPress, you can also use a multilingual content management plug-in like WPML. This plug-in automatically switches layouts to RTL, provided that the WordPress theme used is RTL-friendly. 

UX and font issues

Not all content needs to be mirrored: as an example, numbers, or even untranslated words from any left-to-right language, should remain that format. And even though the linguist in charge of translating the textual content will translate accordingly, all the stakeholders involved in the localization process must be informed on this.

Beyond making sure the right character encoding is used, the teams involved in the creation process need to be aware that standard Arabic, Urdu and Farsi are written in characters with small details, and therefore font size needs to be taken into account when localizing UIs into these languages. However, this can bring spacing and truncation issues.

Because of this, the teams in charge of UX, design, development and integration must be aware of some of these RTL design basics to ensure the interface is ready to integrate RTL content without compromising the user experience. 

Tackle and avoid issues when localizing UIs into RTL languages

Beforehand: preparation is key

As with any project, upfront preparation is key. To make sure to avoid as many issues as possible when localizing UIs, the teams in charge of creating the interface need some upfront preparation to make sure their product is ready to get global. This process is called internationalization. 

Internationalization: “the process of preparing a product to support different language and regional standards (e.g. scripts, writing directions, etc.)” Source

Even though it is time-consuming, this step is crucial, especially for UI localization projects. Indeed, the interface needs to be designed to integrate bidirectional content, and therefore ensure no major issue will raise and compromise the rest of the localization project. 

Afterward: the importance of a good QA

Finally, having language specialists (or language managers) proofing and checking the final integrated RTL interface is also crucial. Indeed, truncation and spacing issues may have happened during the integration. This is especially important as too few specialists in charge of integrating content are familiar with the RTL format.  

The market in the Middle East has been in constant growth over the past few years. What is more, the demand for UI localization into RTL languages increasing more and more. Indeed, as conversion rates are always higher for UIs available in the target audience’s native language, awareness on these issues is important to be able to offer quality content into RTL languages. 

Article written by Laura Jacquemin, CAWEB Master’s