Different languages have different writing directions.
Most languages are written from left to right, or left-to-right (ltr).
In some languages, the text runs from right to left, or right-to-left (rtl). Examples of rtl languages are Hebrew and Arabic.
When the language of a website is changed using a tool such as Conword, web developers are often faced with the challenge that a website is designed for a specific direction of text flow, but a different direction of text flow is to be displayed.
Conword's handling of running directions and HTML
The currently selected language, and thus also the currently selected direction, is stored by Conword in HTML as follows. Example Spanish:
<html lang="es" xml:lang="es" dir="ltr"></html>At lang and xml:lang attribute of the HTML tag, the selected language abbreviation (in this case "es" for Itpañol = Spanish). In the you The attribute stores the direction of the text. For Spanish, this is left-to-right (i.e., "ltr").
For example, if Arabic is selected as the language, the HTML tag receives the information that the direction of text flow should now be from right to left (right-to-left: "rtl").
<html lang="ar" xml:lang="ar" dir="rtl"></html>Modern browsers interpret the you attribute and change the running direction of the entire website accordingly.
Common issues with rtl direction
Some customers report errors that become visible when switching to rtl. This is because various CSS or JavaScript codes were not designed for other directions of text flow. For example, commands such as "padding-left" are used instead of "padding-inline-start." Spacing and positions that refer to "right" or "left" instead of "start" or "end" are not reinterpreted by the browser when the direction of flow is changed, but remain on the right or left.
Tip: If web developers use frameworks such as Bootstrap, these problems have already been solved and changing the running direction is relatively easy. (This is how the issue was handled by the city of Cologne, for example.)
Problems with phone numbers
Another problem is the representation of telephone numbers. It is difficult for AI to recognize which part of a telephone number is an area code, as there is no standardized representation of telephone numbers. For example, the telephone number "0123 / 45678" can also appear in the following variations:
- 0123 / 45678
- 0123/45678
- 012345678
- 0123 – 45678
- 0123-45678
- 0123 45678
- 0123 456 78
- 0123 – 45 67 – 8
- +49 123 / 45678
- +4912345678
- etc.
To exclude phone numbers (or other numbers) from the sort order, you can use the you Attributes can also be applied to different blocks. Conword cannot do this automatically because the contexts on different websites vary too much. The next section contains a JavaScript solution to this problem.
Your options for different running directions
There are basically three ways to deal with the running directions:
- Further development of the website with CSS adjustments
- Complete deactivation of the running direction
- Partial deactivation of the running direction
1. Further development of the website with CSS adjustments
The cleanest solution is to adjust the CSS so that both running directions are supported. Unfortunately, the necessary resources are not always available to implement the necessary changes (quickly). That is why we at Conword have created the option to prevent the running direction from changing.
2. Complete deactivation of the running direction
How to completely disable the running direction is described in the Developer documentation under "Setup Options" described. Basically, before integrating Conword, you need to create a JavaScript config variable that is used for disable_rtl_attribute the value true notices:
<script>
var conword_config={
disable_rtl_attribute:true
};
</script>Or in one line:
<script>var conword_config={disable_rtl_attribute:true};</script>If the config variable is stored in this way, the behavior of Conword described above changes and the you Attribute is no longer set.
Our recommendation: If your website has problems with the rtl display, then deactivate the change of direction for the time being. Now you can go live with Conword and work on the CSS changes in parallel. Once all changes have been made, reactivate the change of direction.
3. Partial deactivation of the running direction
For the problem with phone numbers described above, it may be appropriate to exclude phone numbers from the run direction. You can customize this in your website template by dir="ltr" Set it to the HTML tag or adjust it later using JavaScript.
Sample code:
document.addEventListener("DOMContentLoaded", function() {
var phone_links = document.querySelectorAll('a.phone_number');
for(var i = 0; i < phone_links.length; i++){
phone_links[i].setAttribute('dir','ltr');
}
});Do you have any questions?
If you have any questions on this topic, We will be happy to advise you.
