With a rise in enterprise organisations implementing localisation strategies across their digital touchpoints, multi-language sites are becoming increasingly important to improving customer experience and achieving global success.
There are over 600 million right-to-left (RTL) language speakers worldwide, so it’s unsurprising that support for RTL websites is ever increasing.
Testing RTL language sites
There are specific challenges when designing and testing a RTL language site, as a right-to-left website is not just a ‘flipped’ version of a left-to-right (LTR) version.
When testing RTL sites, you need to always ‘think from the right’ – I find that it helps to think of it as a book that opens from the right, as opposed to the left.
It is best practice to change the machine locale to that of the language site being tested, as there are certain elements, such as a calendar widget form control, that require the locale to be set before serving the correct format.
There are a few common elements where problems are often encountered. These should form part of a key checklist of things to consider when it comes to testing RTL websites.
Text alignment/direction
This is not just a case of aligning text to the right; the direction of the text should read right-to-left as well. One obvious indicator that this hasn’t been implemented correctly, is if the punctuation appears at the beginning of the text, rather than at the end.
نص يستخدم (محاذاة النص) إلى اليمين.
paragraph using (text-align) right.
نص يستخدم (الإتجاه) من اليمين إلى اليسار.
paragraph using (direction) RT
Number alignment
Even in languages which are written from right-to-left, numbers are still read from left-to-right. Pay particular attention to things like date and time formats, and make sure these are correct.
Ordering
Consider the order of items within the user interface. For example, the header, navigation menus or promos.
For instance, if the LTR header is:
Logo | About Us | Case Studies | Contact Us
RTL would look like this:
Contact Us | Case Studies | About Us | Logo
and not like this:
Logo | About Us | Case Studies | Contact Us
Similarly, for promos, if LTR order is:
Promo1 | Promo2 | Promo3
RTL would look like this:
Promo3 | Promo2 | Promo1
Bear this in mind when testing carousels as well. Any ‘next’ or ‘previous’ buttons would change position, and the transition of the items within the carousel would also change.
Dropdown fields
The dropdown indicators should appear to the left of the field, as opposed to the right. Also, if the list of values is long enough to scroll the list, then the scrollbars should appear on the left of the list of values.
(IMAGE UNAVAILABLE)
Scrollbars
Scrollbars should appear to the left. This is true for the page as well as content within a page, for example, dropdown lists, multi-line text boxes, etc.
(IMAGE UNAVAILABLE)
Form fields
In LTR languages, when you type into a field, the characters appear from the left. In RTL, the characters should appear from the right and continue to move to the left.
(IMAGE UNAVAILABLE)
Pay attention to validation error message text; make sure the alignment and text direction is also correct.
Form controls, for example, a calendar widget, should also be checked to ensure the correct format.
Bulleted & numbered lists
The bullet point or number should display before the value in the bulleted/numbered list.
(IMAGE UNAVAILABLE)
Buttons
Buttons should move position to the left. For example, if you have search field and a button to the right of the field, for RTL the button will shift to the left of the field.
(IMAGE UNAVAILABLE)
Multi-lingual sites: things to consider
Where possible, test with content written in the native language, rather than English text. Using content written in the native language will uncover issues that may not be highlighted when using English text.
Fonts
Sometimes, certain fonts are too small and may need to be increased in size for legibility. Conversely, some fonts are too big and may need to be reduced.
There can also be problems with special characters, for example, umlauts, cedillas and other symbols, not rendering correctly.
Buttons
These should be fluid, so that they can accommodate longer label text.
Text containers
There are sometimes problems if containers are of a fixed width, and have been built with just the English language in mind. Certain words in certain languages are a lot longer than the English equivalent, and could potentially break the design.
DEPT® specialises in the design, build and implementation of multi-site, multi-language websites for global enterprises.
