When you’re localizing into an RTL language, everything seems different. Not only the script looks unfamiliar and reading from right to left feels awkward, but also you might need unique adjustments for RTL languages in the i18n or l10n process, or adjustment to your workflows.

Localizing into an RTL language always seems a challenge to me, so I started with the most simple project possible. In the final project of software localization and internationalization class, my group-mates and I localized a small online personality test, where I worked primarily on the language Hebrew. The test comes with HTML, CSS, and JavaScript files, with some strings in the HTML and most in the JavaScript.

In our project, we used 24 ways to wrap our strings in the i18n process and localized the test into 5 languages, covering all UI strings. In RTL pages, our measures include adding “dir=rtl” to the HTML page of the Hebrew page, and also adding the same attribute to our contact form at the end. This attribute does adjust text display and even for the input field in the contact form, the cursor is from right to left. However, it is not perfect, and there might still be some issues that need more adjustment.

In the text preparation stage, I already realized some problems for Hebrew. If you use Google Translate or other online translation tools, you will realize that the text appeared in the translation box reads from right to left, with the punctual mark on the left side of the last character, you will find it to be on the right side of the first character when you paste it into another file, such as the HTML doc. This bothered me a lot until I realized it’s a problem of page settings. The punctual mark is set to appear at the end of the line, although that means right in LTR languages and left on RTL languages. After setting the page to RTL, the punctuation mark will adjust automatically without additional formatting. The script also reads correctly and will not be affected. Storing RTL translation data in files alongside with other languages can also be problematic, since different tools might have different settings, every time the RTL data is (manually) transferred into another file, it carries the risk of being corrupted since a human can make mistakes selecting the data, editing or doing copying and pasting.

Below is an example where I google translated “your name” into Arabic and copied and pasted the translation into the search box.

Alignment

Alignment to the right is automatic with the “rtl” attribute within a textbox or section, however, if the page comes with a LTR design, such as putting a textbox on the left lower side of a word art, the alignment might need some manual adjustment.

Our personality test uses primarily a center alignment, which does us a great favor. After applying the RTL attribute, the layout of the page still looks mostly the same and does not require further adjustment.

Contact form and BiDi

When we were creating a contact form for the page, a double-column design was adopted, which means we not only has to change the alignment of the labels of each field, which is doable by applying the RTL attribute to the form, but also we need to swap the two columns, as seen in this example, the Hebrew version will need to have First name in the right column and last name in the left column, which needs manual adjustment. The more complicated the design of the form is, the more adjustment that has to be done.

In our example, we eventually changed to a single column design since the contact form is very simple, and it also adopts a center alignment which is even more convenient, but if we do want a two-column design, we will probably need to have a separate CSS for Hebrew or have an “if” statement in the JavaScript that loads different designs for RTL languages.

RTL languages do require more attention. They can be troublesome, but by integrating them into the internationalization process early, we can find solutions that work for RTL. Or even better, if the design of the page already takes RTL into consideration, the manual adjustment work at a later stage will be reduced significantly. Also, when a site or an application is localized into the first RTL language, there might be a lot of investment or challenges, but the second and the third should be much simpler.

Compared with western languages like French and German or East Asian languages like Japanese, RTL languages still have lower coverage in the world. I hope this article will shed some light on RTL localization and prove that it’s not as challenging as people might think. Hopefully, one day RTL language coverage will catch up with that of other languages.