When setting up multilingual websites in Sitecore, some languages required RTL alignment support, where specification states that all elements should be right aligned, like Arabic, German and Chinese.
As we are in Tanasuk the first and largest Middle East based Sitecore team that support regional implementations, especially for Arabic language. I will cover in this blog couple of challenges and tips regard designing a RTL language website.
Light-to-left website is not just a ‘flipped’ version of a left-to-right (LTR) version, or this is not just a case of aligning text to the right; the direction of the text should read right-to-left as well, also considering the order of items must be changed into right to left.
In the Sitecore Content Editor, all input fields should be switched to RTL direction, and add a new language then creating an Arabic version for example of an existing item is not enough and does not change input fields to RTL, which means that Sitecore doesn't support Right-to-left.
The illustration below shows how content should looks left-to-Right vs Right-to-left:
 |
| Left to Right alignment for English |
 |
| Right to left alignment for Arabic |
Creating Right-to-Left User friendly Interfaces:
- Add HTML global dir attribute "dir=rtl". This sets the base direction for the overall document direction right-to-left, all block elements page and table layout in the document will inherit this setting unless the direction is explicitly overridden
- Mirroring your layout; that things on the left should be on the right and vice versa. This includes floats, ::before and ::after elements, margins and padding, and order of html elements. To achieve that, create / apply a stylesheet for each direction.
- If you are going to use the same web font for all pages, make sure it is compatible with all of them.
The following is an example demonstrate how to apply above points when switch to Arabic language using backend code:
I hope that was helpful for you! Please do not hesitate to comments or contact me if you have any question. 🌺
Baraa Masri
Email: Bmasri@tanasuk.com
Twitter: @Bara_Masri
