RTL: From Perception Challenges to Unicode Nuances
Hi, I’m Vigen Movsisyan, a Frontend Developer at QIC digital hub.
Before I started working for this Qatari company, I didn’t have to deal with adapting interfaces for different regions. However, in today’s world, creating multilingual websites is a crucial part of web development, which significantly expands the scope of any developer.
One of the key tools for creating such websites is support for translation to different languages, and this is where i18n (internationalisation) comes in. This technology plays an important role in ensuring that people from all over the world can easily use your product. The name i18n itself is significant: “18” is the number of letters between the “i” and the “n” in the word “internationalisation”.
But using i18n isn’t enough. When working for companies based in right-to-left (RTL) countries, developers face unique challenges. That’s what my article is about.
Before we discuss the challenges, let’s consider why i18n is a key component of multilingual websites. With i18n, all you need are JSON files with translations and configured build tool settings. Instead of using hard-coded strings, you can pass keys that adapt to the user’s language. This technology gives you the flexibility to tailor content for different languages, taking into account the nuances of localisation. However, when it comes to Arabic-speaking companies such as QIC, interesting challenges arise.
They have to adapt interfaces and styles to support right-to-left text direction. This affects not only the text but also visual elements such as buttons, menus, and images. It’s really important for developers to make sure the text is displayed correctly while maintaining the efficiency and usability of interfaces for users who are used to RTL layouts.
Why should a developer from a non-Arab country learn about RTL?
Let’s look at the stats — they’re pretty important. Over time, the internet has become an integral part of everyday life, reaching even the most remote corners of the world. When it comes to writing direction, the stats for the Middle East from 2000 to 2023 provide some interesting insights. Research shows a 62 times increase of internet users in the Middle East during this period. This demonstrates how quickly and enthusiastically the region has embraced digital technologies.
Despite this rapid growth rate, the proportion of users who prefer to write and read right-to-left (RTL) remains modest. Only 3.8% of all internet users are from the Middle East. At first glance, 3.8% might seem small. But when you translate that into the number of people, it’s around 200+ million internet users. That’s a huge number of potential customers for digital businesses and new users.
Given this big user base, even a developer in Russia can benefit from understanding and implementing RTL support. By doing this, they can tap into this significant and growing market, making sure their apps and websites are accessible and user-friendly for RTL users, which will help them reach more people and succeed more.
QUIZ
Imagine you are a developer at QIC. Review the examples below and identify potential issues. The answers are provided further down.
Answers:
In the first picture, everything is fine. Yes, the question mark is at the end of the sentence (on the left) and it is upside down. The correct answer is 4.
In the second picture, everything seems fine, but there is a mistake because RTL uses exactly the same logic to display the rating as LTR. The correct answer is 2.
The example in the third picture is hard to read, isn’t it? It is also hard to read for people living in RTL regions, because the phone number is spelt the same as in LTR. The correct answer is 2.
Unicode and RTL: strong, weak and neutral character types
Unicode is a character encoding standard that plays a key role in supporting different languages and text directions. In the context of right-to-left (RTL) languages, such as Arabic or Hebrew, Unicode classifies characters as strong, weak, and neutral.
1. Strong characters
Strong characters in Unicode typically have a well-defined text direction and include most characters in the Arabic and Hebrew alphabets. These characters, such as letters, establish an explicit text direction and do not support direction changes within a line.
Example of a strong character: “م” (Arabic letter “meem”).
2. Weak characters
Weak characters can be aligned left-to-right (LTR) or right-to-left (RTL), depending on the context. This type includes punctuation marks and numbers. They can change direction depending on the surrounding text.
Example of a weak character: “5” (the number five).
3. Neutral characters
Neutral characters have no effect on the direction of the text. They are often used to separate text of different directions within a line.
Example of a neutral character: “ “ (space).
Understanding these categories is important when working with text that supports right-to-left direction, allowing developers to more accurately control the display of text data in different language contexts.
Feeling overwhelmed and thinking of withdrawing your CV from an international company? Hang on, let’s break it down step by step:
Imagine that we have to write a sentence with English and Arabic words and numbers with spaces in between.
The second image shows the operation of the BIDI (Bidirectional) algorithm, which helps to correctly display text consisting of characters with different writing directions. The direction of the cursor is indicated by arrows to help you understand how it moves as you type.
When the cursor moves to the right, it follows the logic of the text: first through the English characters (left to right), then to the Arabic characters (right to left), and then back to the English characters (left to right).
Let’s try an experiment. Go to Google, right-click on the search box, hover over ‘Writing Direction’ and then select ‘RTL’. When you start typing, an error occurs: the cursor ends up behind the microphone icon :)
Now that you have selected RTL, press the “(“ key on your keyboard. Surprised?
In the RTL (right-to-left) world, brackets can be inverted and confusing to someone used to LTR (left-to-right).
Structuring and formatting web content: Understanding key HTML attributes
Tag <bdi>: Effective Text Direction Management
Description: The <bdi> tag allows you to isolate a section of text to prevent text directions from interfering with each other. This is essential when creating multilingual interfaces where text direction may vary between languages.
Example of use: To demonstrate the functionality of the <bdi> tag, consider a scenario where an English sentence contains an Arabic name that should be read from right to left. The <bdi> tag ensures that this name is displayed correctly, regardless of the surrounding text.
Attribute lang: language marking for localisation and semantics
Uses: the lang attribute marks the language of the text within an element, which is vital for search engines, browsers, and automatic translation tools to process content correctly.
Examples of use:
- Multilingual sites: <p lang=”en”>Hello, world!</p> <p lang=”ja”>こんにちは、世界！</p>
- Text styling: blockquote[lang=”es”] { font-style: italic; }
- Semantic correctness: <html lang=”fr”> to indicate the French language of the entire page.
The dir attribute: controlling the direction of text
Description: the dir attribute controls the direction of text (left to right or right to left) and is critical for languages with different writing directions.
Examples of use:
- Unidirectional text: <p dir=”rtl”>هذا نص باللغة العربية.</p>
- Global page direction: <html dir=”ltr”> for pages with text from left to right.
Impact on web design and accessibility
Incorporating the <bdi> tag and the lang and dir attributes into your HTML not only improves the visual presentation and semantic structure of web pages, but also greatly enhances their accessibility to an international audience. These elements help create inclusive web environments that are usable in different language and cultural contexts, and ensure higher visibility of content in search engines worldwide.
Now let’s design a page with cats
Set dir=rtl
Yep, the kitty should be to the right of the text in the Arabic version. Also, the indent should now be on the left, and we should remove the indent on the right altogether. We’ll give it a try.
Is it really necessary to fight with the “right” and “left” properties every time? No, there are logical properties in CSS that can help us out — let’s take a look at them.
CSS Logical Properties are a set of CSS properties designed to handle different text directions and content layouts. They get rid of the physical directions (left-right, top-bottom) so it’s easier to adapt designs for different languages.
Before logical properties were introduced, CSS used physical properties like margin-left, margin-right, padding-top, etc. to control element positioning. But this approach didn’t allow for different text directions, making it tricky to create styles that could be used universally and easily adapted.
CSS Logical Properties include the following key properties:
1. margin-inline-start, margin-inline-end, margin-block-start, margin-block-end:
These properties replace margin-left, margin-right, margin-top, and margin-bottom, respectively. They’re used to set margins depending on the text direction.
2. padding-inline-start, padding-inline-end, padding-block-start, padding-block-end:
These properties work similarly to the previous set, replacing padding-left, padding-right, padding-top, and padding-bottom. They’re used to set internal padding.
3. border-inline-start, border-inline-end, border-block-start, border-block-end:
These properties let you set element borders depending on the text direction, replacing border-left, border-right, border-top, and border-bottom.
4. start, end:
You can use these values in properties that support logical values (like text-align, float, and clear). They adapt automatically based on the text direction.
Let’s look at an example:
The “can I use” reference shows that logical properties can be safely used in enterprise projects.
Icons: what to do with them?
Not all icons require switching between left-to-right (LTR) and right-to-left (RTL) layouts. Some icons remain symmetrical and are readable and understandable in both directions.
However, for some icons, it’s important to change their direction in RTL layouts so that they can be understood by users.
But there are always exceptions. According to Material Design recommendations, if an icon represents an object that can be held in a person’s right hand, it should not be inverted.
Finally, naming conventions
Properly naming CSS classes is an important aspect of development, especially when it comes to supporting multidirectional layouts.
Let’s say we use the BEM (Block-Element-Modifier) method for naming classes. We have a block called menu and two elements: __left and __right. Your colleague might get really upset if, in the RTL version of the site, the element named menu__right ends up on the left 🤡.
We’ve covered the main challenges of transitioning to RTL, and discussed methods for successfully working with such sites: HTML attributes, CSS logical properties, and handling the display logic of graphical elements. Now, armed with knowledge and readiness to conquer the world of RTL, may your projects become even more accessible and user-friendly for people all around the globe!
