Sites from right to left: how to connect the RTL-standard
When an unprepared person sees a site in Arabic, Hebrew or any other RTL (right-to-left) language, his head is spinning: not only text but also interface elements are located from right to left.
When we first came across the need to localize a site in Arabic in Alconost and then test it, we had to study how exactly RTL users view the world:
And if in RTL text you need to insert a word in Latin, it is written as usual: from left to right. Such a mixed RTL-LTR text turns into an excellent simulator for the eyes.
So, if the site you are working with should be displayed in Hebrew, Arabic, or other rare languages with right-to-left writing, you need the site to support RTL standards. And, probably, you will need simultaneous support for RTL and LTR - for example, support for English and Hebrew.
')
You can use one of the following methods:
● Create separate css files for LTR and RTL (that is, only one css file is connected).
Advantages: the desired file is loaded only once.
Disadvantages: any changes in the css file must be duplicated (even if the changes do not affect the standards for displaying pages).
● Create an additional css file for RTL (that is, an additional css file is connected, which overwrites from the main css file only those properties that depend on the page display standard).
Benefits: No need to duplicate changes that affect the standard display of the page when changing css files.
Disadvantages: Loading two files for RTL display instead of one.
● Connect support for RTL and LTR in one file.
Benefits: Just one file.
Disadvantages: A large amount of code in one file can lead to an error when making changes.
If you have a css file for LTR and you need to create another file for RTL, you must copy and rename the source file and rewrite the properties that depend on the writing standards. Similarly, with an additional css file (leaving only those properties that need to be rewritten). It happens this way:
float: left must be replaced with float: right; margin-right to margin-left; padding: 10px 30px 5px 0 on padding: 10px 0 5px 30px , etc.
This can take quite a long time if you have a lot of code in the css file. These are actually mechanical changes, with clear logic behind them, so you probably want to use the resources that will do the work for you. Here are some examples of such services:
● http://www.rtl-er.com - this service will give you a css file with rewritten properties, depending on the display standard (when entering LTR css, you will receive an additional css for RTL);
● http://cssjanus.commoner.com - this service changes only those properties that affect the display standard (when you enter LTR css you get additional css for RTL);
● https://github.com/twitter/css-flip - utility and corresponding application for Sublime - sublime.wbond.net/packages/CSS%20RTL%20generator , which allow to “mirror” css file.
So, with the receipt of RTL css from LTR problems should arise. The next step is to connect css. The principle is simple - we check the language or display standard and disable the corresponding / additional css or use the css file that supports both RTL and LTR. If you connect an additional css file that overwrites the properties of the source file, make sure that it connects after the source file. If you have only one file for LTR and RTL, then you can connect the corresponding properties to the mapping standards using selectors such as [dir = "ltr"] and [dir = "rtl"] .
● Analyze the page appearance in a language requiring RTL support. Pay attention to the css files that determine the placement of those elements that need to be mirrored (those that will be displayed according to the RTL standard).
● Create RTL versions of the necessary files and save them to the same folder with the source files, adding the prefix “rtl-” to the names.
● Find where the files we need are connected. To do this, you can use the grep: grep-r “studio.css” utility '/ home / voron / ssh / wp-content / themes / studio'
● We connect in the found css file for RTL:
where if (is_rtl ()) is a Wordpress function that checks to see if the current page language matches the standard letter from right to left.
If you use services that automatically convert RTL to LTR, you should pay more attention to testing, because there is a risk that the service might mirror what you do not need. You also need to pay attention to the sprites, as they are not automatically reflected. The problem can be solved by creating separate sprites for RTL. If you are using SCSS and you need LTR and RTL support, try Directional-SCSS .
By the way, we at Alconost will be happy to help with localization into Arabic and Hebrew , as well as with linguistic testing of already localized products and sites.
About the translator
The article is translated in Alconost.
Alconost is engaged in the localization of applications, games and websites in 60 languages. Language translators, linguistic testing, cloud platform with API, continuous localization, 24/7 project managers, any formats of string resources.
We also make advertising and training videos - for websites selling, image, advertising, training, teasers, expliners, trailers for Google Play and the App Store.
Read more: https://alconost.com
When we first came across the need to localize a site in Arabic in Alconost and then test it, we had to study how exactly RTL users view the world:
- instead of underlining, italics, or p aseqs, Arabs usually use overlining;
- fractional word wrap to another line is not allowed;
- empty space in the line is eliminated by stretching the letters;
- numbers are written from left to right;
- in Arabic, punctuation marks are written from left to right;
- Hebrew and Arabic do not have capital letters.
And if in RTL text you need to insert a word in Latin, it is written as usual: from left to right. Such a mixed RTL-LTR text turns into an excellent simulator for the eyes.
So, if the site you are working with should be displayed in Hebrew, Arabic, or other rare languages with right-to-left writing, you need the site to support RTL standards. And, probably, you will need simultaneous support for RTL and LTR - for example, support for English and Hebrew.
')
RTL connection methods
You can use one of the following methods:
● Create separate css files for LTR and RTL (that is, only one css file is connected).
Advantages: the desired file is loaded only once.
Disadvantages: any changes in the css file must be duplicated (even if the changes do not affect the standards for displaying pages).
● Create an additional css file for RTL (that is, an additional css file is connected, which overwrites from the main css file only those properties that depend on the page display standard).
Benefits: No need to duplicate changes that affect the standard display of the page when changing css files.
Disadvantages: Loading two files for RTL display instead of one.
● Connect support for RTL and LTR in one file.
Benefits: Just one file.
Disadvantages: A large amount of code in one file can lead to an error when making changes.
How to implement it
If you have a css file for LTR and you need to create another file for RTL, you must copy and rename the source file and rewrite the properties that depend on the writing standards. Similarly, with an additional css file (leaving only those properties that need to be rewritten). It happens this way:
float: left must be replaced with float: right; margin-right to margin-left; padding: 10px 30px 5px 0 on padding: 10px 0 5px 30px , etc.
This can take quite a long time if you have a lot of code in the css file. These are actually mechanical changes, with clear logic behind them, so you probably want to use the resources that will do the work for you. Here are some examples of such services:
● http://www.rtl-er.com - this service will give you a css file with rewritten properties, depending on the display standard (when entering LTR css, you will receive an additional css for RTL);
● http://cssjanus.commoner.com - this service changes only those properties that affect the display standard (when you enter LTR css you get additional css for RTL);
● https://github.com/twitter/css-flip - utility and corresponding application for Sublime - sublime.wbond.net/packages/CSS%20RTL%20generator , which allow to “mirror” css file.
CSS connection
So, with the receipt of RTL css from LTR problems should arise. The next step is to connect css. The principle is simple - we check the language or display standard and disable the corresponding / additional css or use the css file that supports both RTL and LTR. If you connect an additional css file that overwrites the properties of the source file, make sure that it connects after the source file. If you have only one file for LTR and RTL, then you can connect the corresponding properties to the mapping standards using selectors such as [dir = "ltr"] and [dir = "rtl"] .
Step-by-step analysis of the connection of an additional RTL css file for a Wordpress theme:
● Analyze the page appearance in a language requiring RTL support. Pay attention to the css files that determine the placement of those elements that need to be mirrored (those that will be displayed according to the RTL standard).
● Create RTL versions of the necessary files and save them to the same folder with the source files, adding the prefix “rtl-” to the names.
● Find where the files we need are connected. To do this, you can use the grep: grep-r “studio.css” utility '/ home / voron / ssh / wp-content / themes / studio'
● We connect in the found css file for RTL:
// css ( grep): wp_enqueue_style( 'studio', get_template_directory_uri() . '/_inc/css/studio.css', array(), $version ); // css , , : 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 Wordpress function that checks to see if the current page language matches the standard letter from right to left.
If you use services that automatically convert RTL to LTR, you should pay more attention to testing, because there is a risk that the service might mirror what you do not need. You also need to pay attention to the sprites, as they are not automatically reflected. The problem can be solved by creating separate sprites for RTL. If you are using SCSS and you need LTR and RTL support, try Directional-SCSS .
By the way, we at Alconost will be happy to help with localization into Arabic and Hebrew , as well as with linguistic testing of already localized products and sites.
About the translator
The article is translated in Alconost.
Alconost is engaged in the localization of applications, games and websites in 60 languages. Language translators, linguistic testing, cloud platform with API, continuous localization, 24/7 project managers, any formats of string resources.
We also make advertising and training videos - for websites selling, image, advertising, training, teasers, expliners, trailers for Google Play and the App Store.
Read more: https://alconost.com
Source: https://habr.com/ru/post/250061/
All Articles