There seems to be something wrong with the headline? This is one of the problems web developers face when adding support for languages ​​such as Arabic. In this article, we will talk about the problems we encountered and the solutions that we came up with to support the Arabic language in the Spotify desktop client and web player.

Spotify localization is important. Our mission is to "unleash the potential of human creativity, providing millions of musicians with the opportunity to earn a living from their art, and billions of fans can enjoy and be inspired by it." To achieve this mission, it is important that users from different countries can communicate effectively in their languages. We recently launched Spotify in the regions of North Africa and West Asia. One of the languages ​​in these regions is Arabic. Unlike English, Arabic is read from right to left. This affects websites that want to support Arabic.

Table of contents

• Mirror Image Layout
  
• English in RTL format
  
• Arabic letter
  
• Quality standards
  
• Useful sources

In the article we will use the following abbreviations:

LTR (Left To Right): text that is read from left to right, for example, English or Spanish.
RTL (Right To Left): text that is read from right to left, such as Arabic.

Mirror Image Layout

In Arabic, not only text is spread from right to left, but also the entire page layout. For example, flip images that indicate direction. We encountered several exceptions, which we will discuss below in the icon section.

How the dir attribute works

The direction of the text in the element to the browser is reported by the attribute dir. To set the global direction of a page, you must set an attribute dirfor the entire page.

Attribute Values:

• ltr  - used for writing from left to right (for example, English, Swedish). This is the default value.
  
• rtl  - used for writing from right to left (for example, Arabic, Hebrew, Persian).
  
• auto - used for dynamic content. The browser itself chooses the direction. To process elements and determine the direction, the Unicode Bidirectional Algorithm is used . For more information, see "English in RTL format . "

CSS

Both CSS Flexbox and CSS Grid look at an attribute dirto determine the direction of an element. For example, it flex-startautomatically switches to RTL when the attribute is dirset to "rtl".

But an attribute dirusing flexbox or grid might not be enough to reflect the entire user interface on RTL. There are too many asymmetric CSS properties to watch out for when developing a website that supports both LTR and RTL. For example margin-left: 20px, text-align: rightin RTL they will change and become margin-right: 20pxand text-align: left.

There are many tools to automate this work. We chose PostCSS-RTL , which generates RTL rules with “inverted” properties during the build phase.

.foo {
  margin-left: 15px;
  text-align: right;
  color: rebeccapurple;
}

CSS input

[dir] .foo {
  color: rebeccapurple;
}
[dir="ltr"] .foo {
  margin-left: 15px;
  text-align: right;
}
[dir="rtl"] .foo {
  margin-right: 15px;
  text-align: left;
}

CSS output

Icons

Icons and elements that have a direction or are related to progress should be converted to RTL. For example, the back and forward navigation buttons need to be swapped.


Back button in LTR


The "Back" button in RTL (English text is used instead of Arabic)

All animations with the direction of movement must also be turned over. For example, carousels should slide the other way.

Exceptions

Initially, we assumed that everything would be mirrored. But pretty quickly saw some exceptions. For example, the media playback buttons and progress bar do not require mirroring, since they relate to the direction of the tape being played. Arabic-speaking users expect the playback controls and progress bar to look the same as in LTR.


Playback indicator in LTR

English in RTL format

Often, LTR and RTL texts are mixed on the same page. Spotify has over 40 million songs by musicians from around the world and over 3 billion playlists. Content is presented in many languages ​​for users from all over the world. Therefore, Spotify clients often mix LTR and RTL content.

(Hello (World: the problem of punctuation and parentheses

One of the first problems we encountered looked like this:


The problem of brackets

This happens because the browser sets the basic direction of the text based on the value of the attribute of dirour element. Punctuation marks, like the ( ) . !rest, are not described by direction in Unicode. They inherit the basic direction of the text.

The bidirectional Unicode Bidirectional Algorithm looks at each character in a string from right to left. Take the line on the page as an example "Hello (World)".

• The algorithm starts parsing the line to the right. He sees an undirected character ), so he looks at the basic direction of the text and sees that the text goes from right to left. The algorithm decides to move )to the beginning of the line.
  
  

      “Hello (World)” -> “(Hello (World”)

• The algorithm sees dwith the direction of LTR. It does not need to be moved. The same goes for other English characters up to (.
  
• The algorithm sees (without direction. He remembers the prevailing base direction (given by the previous character W) from left to right. The algorithm decides not to move (. The same goes for space and all characters in"Hello”

Learn more about how the Unicode Bidirectional Algorithm works here .

As a result, we get a string "(Hello (World". We solved this problem by specifying the value autofor the attribute dirin all the dynamic content, for example, in the names of artists, album and song names. This isolates the content and sets the base direction according to the first strongly typed direction character. In this case, undirected characters will always inherit the direction from the surrounding characters, not the page. Therefore, we get a string "Hello (World)". To maintain proper alignment, use the attribute only for inline inline elements, otherwise you will have to add a property to the elements text-align.

... ello World: truncation problem

Mixed content is also a problem if you want to add truncation that doesn't fit the element.


LTR UI: Arabic text truncated from the wrong side


RTL UI: English text truncated on the wrong side.

Truncation occurs on the wrong side, because the browser sets the direction of the text from the attribute dir. Setting the attribute "auto"for an element with truncated text solves the problem .


LTR UI: Arabic text truncated on the right side


RTL UI: English text truncated on the right side

Arabic letter

When developing a multilingual UI, it is important to make sure that the interface works correctly for all alphabets. Here, in a nutshell, what you need to check when adding Arabic.

Intersymbol

Arabic writing is ligature. Most, if not all, characters in a word are related to each other. For this reason, intersymbol spacing should not be used in Arabic. He breaks the symbols, breaking the natural ligature.

Font size

Typically, Arabic characters have more complex glyphs than English characters. There are more lines and nuances that should fit into the same space. Because of this, Arabic letters with the same font size are less legible than English. The characters are too small. We decided to increase the minimum font size in Arabic from 11 to 12px. We also made sure that the font does not complicate Arabic glyphs. A good choice would be Google Noto , which is more legible than Arial, the default backup font for Arabic in the browser.

Vertical cropping

Some Arabic letters are higher than English. This can cause characters to be truncated vertically. For Arabic, you may need to increase the line spacing (line-height).


Vertical cropping

Capital letters

There are no capital letters in Arabic, so there is no point in highlighting something in capital letters on the page.

Arab commas

In many languages, a comma is used ,. In Arabic, the other separator: ،.

We often met a team in the code array.join(‘, ‘). To support different delimiters, depending on the user's language settings, we have added a method getSeparator().

Arabic numerals

In Arabic, two number systems

• Western Arabic Numerals: 0 1 2 3 4 5 6 7 8 9
  
• Eastern Arabic Numerals: ٩ ٣ ٤ ٥ ٦ ٧ ٨ ١ ٢ ٠

Select one system and use it consistently throughout the application. We chose the western Arabic numerals.

Transparent text color

Glyphs in Arabic may overlap. The transparent color of the text does not work, because the overlapping parts do not get the expected transparency. The solution is a completely opaque color and opacity for the text element.


Transparency issue

Quality standards

Here are some of the things we have done to get the Arabic language up to date:

• Team Test Sessions
  
• Beta test with Arabic speaking staff
  
• Test UI and translations by external agencies.

To ensure the quality of the Arabic UI, some tools were needed.

We decided to create a GitHub bot. He posts comments on pool requests that match potential issues. The comment does not impose anything: it’s just a reminder to check how the change will affect the Arabic language, with reference to the testing instructions. The bot comments on the changed lines corresponding to padding, character spacing, transformations, etc. The CSS code is converted by PostCSS-RTL, so it’s usually enough to look at the change in Arabic and make sure that it looks good. CSS properties can be set via JS, and PostCSS-RTL does not convert JS. The bot checks JS files and comments on them, too, if the corresponding properties are found there.


Comment by tob-bot

Useful sources

1. Material Design - Bidirectionality
2. Internationalization Methods: HTML & CSS Authoring
3. HTML authoring: writing from right to left
4. Comparative analysis of Arabic and Persian languages
5. ECMAScript Internationalization API