Different languages have different text directions.
Most languages are written from left to right (LTR).
In some languages, the text runs from right to left (RTL). Examples of “RTL languages” include Hebrew and Arabic.
When the language of a website is changed using a tool like Conword, web developers often face the challenge that a website is designed for one text direction but is intended to be displayed in a different one.
Conwords' Handling of Text Direction and HTML
Conword embeds the currently selected language—and thus the currently selected text direction—in the HTML as follows. Example: Spanish:
<html lang="es" xml:lang="es" dir="ltr"></html>At lang and xml:lang The attribute of the HTML tag is the selected language code (in this case, “es” for Itpañol = Spanish) is stored. In the you This attribute specifies the text direction. For Spanish, this is left-to-right (i.e., "ltr").
For example, if you select Arabic as the language, the HTML tag is informed that the text direction should now be right-to-left (rtl).
<html lang="ar" xml:lang="ar" dir="rtl"></html>Modern browsers interpret this you Attribute and change the navigation direction of the entire website accordingly.
Common Problems with the RTL Direction
Some customers have reported errors that become apparent when switching to rtl. This is because certain CSS or JavaScript code was not designed to handle different text directions. For example, properties such as “padding-left” are used instead of “padding-inline-start.” Spacing and positioning that refer to “right” or “left” rather than “start” or “end” are not reinterpreted by the browser when the text direction changes; instead, they simply remain aligned to the right or left.
Tip: If web developers use frameworks such as Bootstrap, these issues are already resolved, and changing the direction of navigation is relatively straightforward. (This is how the issue was handled by the City of Cologne, for example.)
Problems with Phone Numbers
Another problem is the formatting of phone numbers. It is difficult for AI to determine which part of a phone number is an area code, since there is no standardized format for phone numbers. For example, the phone 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 search, you can you The attribute can also be applied to different blocks. Conword cannot do this automatically because the contexts on the various web pages are far too different. The next section provides a JavaScript solution to this problem.
Your options for different running directions
There are basically three ways to handle the running directions:
- Further Development of the Website with CSS Adjustments
- Complete deactivation of the direction of travel
- Partial Deactivation of the Direction of Travel
1. Further Development of the Website with CSS Adjustments
The cleanest solution is to modify the CSS so that both text directions are supported. Unfortunately, the necessary resources aren't always available to implement the required changes (quickly). That's why we at Conword have created a way to prevent the text direction from changing.
2. Complete deactivation of the direction of travel
For instructions on how to completely disable the direction of travel, see the Developer documentation under "Setup Options" described. Basically, before integrating Conword, you need to create a JavaScript configuration variable that is used for disable_rtl_attribute the value true notices:
<script>
var conword_config = {
disable_rtl_attribute: true
};
</script>Or in a single line:
<script>var conword_config = {disable_rtl_attribute: true};</script>If the config variable is set this way, Conword's behavior as described above changes, and the you The attribute is no longer set.
Our recommendation: If your website is having problems with the rtl If this affects the layout, disable text direction switching for now. You can now go live with Conword and work on the CSS changes at the same time. Once all changes are complete, re-enable text direction switching.
3. Partial deactivation of the direction of travel
To address the issue with phone numbers described above, it may be helpful to exclude phone numbers from the flow direction. You can adjust this in your website template by dir="ltr" Set it in 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 about this topic, We'd be happy to advise you.
