Localization for RTL Languages
Sometimes simply translating website content into another language isn’t enough. For many markets with complicated languages, localization is an essential aspect of website translation. Non-Latin characters, right-to-left (RTL) languages, and text expansion are some of the factors which must be considered for languages like Chinese, Arabic and German.
Arabic, a popular RTL language, is the 4th most spoken language, with 26 Arabic-speaking countries. Other RTL languages include: Hebrew, Persian and Urdu.
In this blog, I will cover some tips for localizing RTL languages.
Quick Tips
1. Add “dir=rtl” to the HTML tag, this leads to right-aligned text and mirror-imaging of things like page and table layout, which cascades down through all the elements on the page. There is also a CSS direction property that changes the text flow of block level elements and text but does not affect the layout of the page.
Direction “dir” also specifies the directionality of tables.
When direction is used for tables, it displays as below:
2. Mirroring your layout means that things on the left should be on the right and vice versa. This includes floats, ::before and ::after elements, margins and padding.
3. Use the UTF-8 (Unicode) character encoding for content, databases, etc.
4. Fonts and characters: Arabic characters are wider and shorter than Latin characters, which gives a different visual appearance.
5. If you are going to use the same web font for all pages, make sure it is compatible with all of them.
6. Create a stylesheet for each direction.
7. If you have hardcoded words in your pages, keep them in separate translation files.
8. Localizing dates can be tricky in Arabic, you need to watch for dialectal differences (check out “What are the differences between Arabic languages?” for more info on this topic).
Summary
While RTL is a rich topic and there is more to cover, this article acts as the basic knowledge you need to start exploring RTL confidently. RTL is not about “flipping” or “translating” content, it’s about making every aspect of the UI and layout RTL-friendly.
