Here are a few best practices on Right to Left (RTL) formatting that have come up with developers tasked with RTL languages like Arabic, Hebrew and Farsi. Formatting RTL Text for your website can made more easy by using the language direction CSS style property. This CSS property specifies the text direction at block level to override the base direction from left-to-right to right-to-left. The language direction is actually bi-directional that uses the Unicode algorithm to solve mixed content such as the direction of phone numbers or names that are written with Roman numerals and letters. For most uses, the rtl direction style works well to solve most of all the directional problems. Of course, it always is advisable to check your layout with a professional translator. We work regularly in website localization and advise agencies on coding such as this when working in other languages.
Language Direction can be declared in CSS by creating a style using the following code, for example:
.RTL{
direction: rtl;
}
Using this you can apply the class “RTL” to any element that requires a bi-directional layout. For instance without the correct language direction, you get this (a line taken from Microsoft’s site):
No matter where you want to take your organization, get there with Windows Server 2019—the operating system that bridges on-premises environments with Azure services enabling hybrid scenarios and maximizing existing investments.
بغض النظر عن المكانة التي تُريدها لمؤسستك، استمتع بإنجاز ما تريد بفضل Windows Server 2019 – نظام التشغيل الذي يتجاوز كل بيئات المواقع مع خدمات Azure، مما يسمح بسيناريوهات هجينة ويتيح تحقيق أقصى قدر من الاستثمارات الحالية.
Notice that the direction of the Arabic text is left-to-right layout and left-aligned. Once you see the language layout corrected, other problems with the original text are more apparent:
بغض النظر عن المكانة التي تُريدها لمؤسستك، استمتع بإنجاز ما تريد بفضل Windows Server 2019 – نظام التشغيل الذي يتجاوز كل بيئات المواقع مع خدمات Azure، مما يسمح بسيناريوهات هجينة ويتيح تحقيق أقصى قدر من الاستثمارات الحالية.
Apart from the language direction and alignment, the hyphen also is moved in the correct position. That’s because the order in which the language flows is now right-to-left, meaning that the hyphen that is intended to follow “Windows Server 2009” is to the left, which is correct.
Table formatting
Tables also need to be declared to be oriented right-to-left. Using the same CSS style, you can orient the table in reverse direction so that your column structure is reversed. However, the text within the table seems to not take the inherent property of the language direction set in the table properties. For that, you have to set the CSS property also of the table content (in <tbody> for instance) to make sure the language flows. If you are able to manipulate the language direction RTL in the HTML head, your table and content does flow properly right off the bat. However, with CSS styling you can also manipulate other style properties that might need adjustment.
| Row 1 | No matter where you want to take your organization, get there with Windows Server 2019—the operating system that bridges on-premises environments with Azure services enabling hybrid scenarios and maximizing existing investments. |
الصف 1 |
بغض النظر عن المكانة التي تُريدها لمؤسستك، استمتع بإنجاز ما تريد بفضل Windows Server 2019 – نظام التشغيل الذي يتجاوز كل بيئات المواقع مع خدمات Azure، مما يسمح بسيناريوهات هجينة ويتيح تحقيق أقصى قدر من الاستثمارات الحالية. |
Proper Styling of RTL languages
Using Arabic as an example, there are other issues with the font that needs to be addressed. It’s advisable to use a font that is designed for the language (Noto is a good font made by Google) and preferably without any styling such as italics or bolding.
Make sure also that the font is formatted at a larger point size than the English. Arabic doesn’t read as well at the same font size as the English, therefore make sure that the CSS stylesheet is amended (or better, create a separate style sheet) for Arabic fonts.
RTL Language Direction Layout
Another format question that needs to be resolved is the layout of your site. If your site is a linear flow (top-down) the alignment is resolved using the language direction layout. However, as we have seen with table layouts, the logical order of horizontally separated information (such as two rows in a table), also could be reversed. There are various factors that attract the eye as presented in this article about visual reading patterns in Arabic. Butg if the information is presented logically from left to right you might consider reversing the layout direction.
This reversal is mostly used in mobile apps and built into Xcode by Apple, but there is not clear evidence that a reverse layout is necessary in websites. There are examples of sites where just the text direction has been flipped without the layout. Others have a fully Right-to-Left orientation which helps also with the logical flow of navigational elements (menus), breadcrumbs, the position of images (not necessarily the reversal of the actual image, more on that later) and position of your logo.
Icons
Icons are particularly interesting and demonstrate some of the confusion around bi-directionality of the language. The best example of this is with checkmarks. Checkmarks do not get flipped, while the orientation of checkbox/mark followed by the list item (text) does get flipped. Apple has defined icons into 3 categories in XCode that I’ve found particularly useful in defining the orientation of images:
Symmetrical
Symmetrical icons are icons that have no direction can can be used universally
Mirrored
Icons that can be mirrored are for instance bulleted list with lines or icons that show direction.
Dedicated
Dedicated icons are those that are not symmetrical and cannot be simply mirrored to format for RTL languages and need a dedicated image.
If your site is image-heavy, consider categorizing your images Images, icons or graphics need to be assessed based on not only the language and direction, but also based on it’s cultural (symbolism, color, portraits, geography, etc.) and use those assets specifically for those language sites.
Define the Language
Finally, it is always wise to set your language by adding:
<HTML lang=”en”>
and replace the attribute with the ISO code referenced here. You can also specify the language of any block elements by simply defining the language there. This also helps with providing accessibility features with the right language settings that are available to readers.
Conclusion
So there you have it, a few basic elements that can be used to set up a document in RTL format. There are a lot of other challenges in RTL language direction formatting and it’s likely that some of it will have to be tested, reviewed and solved through iterative processes. But this should be a good start.
