In fact, vast majority of websites are now developed supporting multilingual functionality. But it can turn out to be a problem, if there’s a need to apply different writing systems. So in this blog post we will tell, how to set up different page display standards on your website.
In general, LTR (left-to-right) and RTL (right-to-left) mean writing standart. But in this blog post we will consider LTR and RTL as pages display standards. For example, here is a screenshot of one website in English and Hebrew:
As we see, the pages look like a mirror reflection. So, if the website you’re working with, should be displayed in Hebrew, Arabic or some other rare right-to-left script (Aramaic, Southern Balochi, Bakthiari, Sorani, Dhivehi, Persian, Gilaki, Kurdish, Mazanderani, Western Punjabi, Pashto, Sindhi, Uyghur, Urdu, Yiddish), you need your website to be support RTL standards. In this case you will probably need simultaneous support of RTL and LTR, for example, support of English and Hebrew. You can apply one of following practices:
- Create separate css files for LTR and RTL (which means, that you have to enable only the one you need).
Advantages: you need to upload needed file just once.
Disadvantages: any changes in css file have to be duplicated (even if they do not influence page display standards).
- Create additional css file for RTL (this means, that additional css file is enabled. This file rewrites from the main css file only those characteristics, that depend on page display standard).
Advantages: You don’t have to duplicate the changes, which do not have impact on page display standart while changing css file.
Disadvantages: Two files instead of one will be uploaded for displaying the RTL script.
- Enable RTL and LTR support in one file.
Advantages: Just one file.
Disadvantages: Greater amount of code in one file, which creates the risk of making a mistake while changing anything.
If you have css file for LTR and need to create another one for RTL, you should copy and rename the original file and rewrite the characteristics, that influence the writing standards. Similarly to that we do with additional css file (we leave just those characteristics, which should be rewritten). It is done in such a way:
float: left should be replaced with float: right; margin-right with margin-left; padding: 10px 30px 5px 0 with padding: 10px 0 5px 30px and so on.
It could take quite much time, if you have much code in css file. Those changes are mechanical and there’s a clear logic in this process, so you might want to use specific resources to do this work for you. Here’s some examples of such resources:
- http://www.rtl-er.com — this resource will give you css file with rewritten characteristics, depending on display standard (you input LTR css and get additional css for RTL);
- http://cssjanus.commoner.com — this resource changes only those characteristics, which influence display standard (you input LTR css and get additional css for RTL);
- https://github.com/twitter/css-flip — utility snd application for Sublime — https://sublime.wbond.net/packages/CSS%20RTL%20generator allowing to mirror the css.
So getting RTL css from LTR won’t be a problem. Next stage is enabling the css. It is quite clear — we check the language or display standart and disable relational/additional css, or apply css file, supporting both RTL and LTR. If you enable additional css file, which rewrites the characteristics of the original one, ensure, that it is enabled after the original file. If you have just one file for LTR and RTL, you can attach relational characteristics to display standards using selectors like, for example, [dir="ltr"] and [dir="rtl"].
Let’s analyze enabling of additional RTL css file for Wordpress theme step by step:
- Analyse, how the page would look like in language, requiring RTL support. Pay attention to those css files defining the places of elements, which are to be mirrored (the ones to be displayed in RTL standart).
- Create RTL versions of needed files and save them to the same folder with original files, adding to the names “rtl-” prefix.
- Find, where needed files are enabled. You can use grep for that: grep -r "studio.css" '/home/voron/ssh/wp-content/themes/studio’
- Enable css for RTL in the file we found:
// here the original css is enabled (found with grep):
wp_enqueue_style( 'studio', get_template_directory_uri() . '/_inc/css/studio.css', array(), $version );
// here the additional css is enabled, if it is needed:
if (is_rtl()) {
wp_enqueue_style( 'studio-rtl', get_template_directory_uri() . '/_inc/css/studio-rtl.css', array(), $version );
}
where if (is_rtl()) — is a function of Wordpress, checking, if current language of page is those with rigt-to-left script standart.
If you use the resources, which automatically convert RTL to LTR, you should pay greater attention to testing, as there’s a risk, that the resource can mirror the parts you don’t need. You also should pay attention to sprites, as they are not mirrored automatically. The problem could be solved by creating separate sprites for RTL. If you use SCSS and you need LTR and RTL, try Directional-SCSS: https://github.com/tysonmatanich/directional-scss.