标题似乎有问题吗？这是Web开发人员在添加对阿拉伯语等语言的支持时面临的问题之一。在本文中，我们将讨论在Spotify桌面客户端和Web Player中支持阿拉伯语言时遇到的问题以及解决方案。

Spotify本地化很重要。我们的使命是“释放人类创造力的潜力，为数百万音乐家提供从艺术中谋生的机会，数十亿粉丝可以享受并从中得到启发。” 为了实现这一使命，重要的是来自不同国家的用户可以使用其语言进行有效交流。我们最近在北非和西亚地区推出了Spotify。这些地区的语言之一是阿拉伯语。与英语不同，阿拉伯语从右到左阅读。这会影响要支持阿拉伯语的网站。

镜像布局

在阿拉伯语中，不仅文本从右到左散布，而且整个页面布局也是如此。例如，翻转指示方向的图像。我们遇到了几个例外，我们将在下面的图标部分中讨论。

dir属性如何工作

元素中文本到浏览器的方向由dir属性报告。要设置页面的全局方向，必须为整个页面设置dir属性。

属性值：

ltr-用于从左到右书写（例如，英语，瑞典语）。这是默认值。
rtl-用于从右到左书写（例如阿拉伯语，希伯来语，波斯语）。
自动 -用于动态内容。浏览器本身选择方向。为了处理元素并确定方向，使用了Unicode双向算法。有关更多信息，请参见“ RTL格式的英语”。

的CSS

CSS Flexbox和CSS Grid都通过dir属性来确定元素的方向。例如，当dir属性设置为"rtl"时， flex-start自动切换到RTL。

但是使用flexbox或grid的dir属性可能不足以反映RTL上的整个用户界面。开发支持LTR和RTL的网站时，有太多非对称CSS属性值得关注。例如，RTL中的margin-left: 20px和text-align: right将会更改并变为margin-right: 20px和text-align: left 。

有许多工具可以使这项工作自动化。我们选择了PostCSS-RTL ，它在构建阶段生成具有“ inverted”属性的RTL规则。

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

CSS输入

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

CSS输出

图示

具有方向或与进度相关的图标和元素应转换为RTL。例如，后退和前进导航按钮需要交换。

LTR中的“后退”按钮

RTL中的“后退”按钮（使用英语而不是阿拉伯语）

所有方向性动画也必须翻转。例如，旋转木马应以其他方式滑动。

例外情况

最初，我们假设一切都会被镜像。但是很快就看到了一些例外。例如，媒体播放按钮和进度条不需要镜像，因为它们与磁带的播放方向有关。讲阿拉伯语的用户希望播放控件和进度条与LTR中的外观相同。

LTR中的播放指示器

RTL格式的英语

通常，LTR和RTL文本混合在同一页面上。 Spotify拥有来自世界各地的音乐家超过4000万首歌曲和超过30亿个播放列表。内容以多种语言呈现给来自世界各地的用户。因此，Spotify客户经常将LTR和RTL内容混合在一起。

（您好（世界：标点符号和括号的问题

我们遇到的第一个问题是这样的：

括号问题

发生这种情况是因为浏览器根据元素的dir属性的值设置了文本的基本方向。标点符号，例如( ) . ! ( ) . ! 其余未按Unicode的方向进行描述。它们继承了文本的基本方向。

双向Unicode双向算法从右到左查看字符串中的每个字符。例如，以页面上的"Hello (World)" 。

该算法开始解析右边的行。他看到一个无方向性的字符) ，因此他查看了文本的基本方向，并看到了文本从右到左。该算法决定将)移至行首。
```
  “ Hello（World）”->“（Hello（World）） 
```
该算法以LTR方向看到d 。它不需要移动。其他英文字符（最多等于( 。
该算法从左到右看到(无方向。它记住了主要的基本方向（由上一个W给出）。该算法决定不移动( 。），空格和"Hello”所有字符都一样

在此处了解有关Unicode双向算法如何工作的更多信息。

结果，我们得到字符串"(Hello (World" 。通过在所有动态内容（例如，艺术家，专辑和歌曲名称中）为dir属性指定auto值来解决此问题，这将隔离内容并根据第一个方向设置基本方向一个强类型的方向字符。在这种情况下，无方向的字符将始终从周围的字符而不是页面继承该方向。因此，您将获得字符串"Hello (World)" 。为确保正确对齐，请仅将属性用于内置e 内联元素，否则必须将text-align属性添加到元素。

... ello World：截断问题

如果要添加不适合该元素的截断，则混合内容也是一个问题。

LTR UI：阿拉伯文本从错误的一侧被截断

RTL UI：英文文本从错误的一侧被截断

截断发生在错误的一侧，因为浏览器从dir属性设置文本的方向。通过为文本截断的元素设置"auto"属性可以解决该问题。

LTR UI：阿拉伯文文本在右侧被截断

RTL UI：英文文本在右侧被截断

阿拉伯字母

在开发多语言UI时，重要的是要确保该界面对于所有字母均正确工作。简而言之，添加阿拉伯语时需要检查的内容。

符号间

阿拉伯文字是连字。一个单词中的大多数（如果不是全部）字符是相互关联的。因此，符号间的间距不应使用阿拉伯语。他打破了符号，打破了自然的连字。

字号

通常，阿拉伯字符比英语字符具有更复杂的字形。在同一空间中应该有更多的线条和细微差别。因此，具有相同字体大小的阿拉伯字母不如英语清晰。字符太小。我们决定将阿拉伯语的最小字体大小从11px增加到12px。我们还确保该字体不会使阿拉伯字形复杂化。最好的选择是Google Noto ，它比Arial更清晰易读，Arial是浏览器中阿拉伯语的默认备份字体。

垂直裁剪

一些阿拉伯字母高于英语。这会导致字符被垂直截断。对于阿拉伯语，您可能需要增加行距（行高）。

垂直裁剪

大写字母

阿拉伯语没有大写字母，因此在页面上以大写字母突出显示某些内容没有意义。

阿拉伯逗号

许多语言都使用逗号作为逗号。阿拉伯语中的另一个定界符： ، 。

在我们的代码中经常遇到代码array.join(', ') 。为了支持不同的定界符，取决于用户的语言设置，我们添加了getSeparator()方法。

阿拉伯数字

在阿拉伯语中，两个数字系统

西方阿拉伯数字：0 1 2 3 4 5 6 7 8 9
东方阿拉伯数字：：٤ ٢ ٢ ٢

选择一个系统，并在整个应用程序中始终使用它。我们选择了西方的阿拉伯数字。

透明文字颜色

阿拉伯语的字形可能会重叠。文本的透明颜色不起作用，因为重叠的部分没有获得预期的透明度。解决方案是文本元素完全不透明的颜色和不透明性。

透明度问题

质量标准

以下是我们为更新阿拉伯语所做的一些事情：

团队测试会议
与阿拉伯语工作人员进行Beta测试
通过外部机构测试用户界面和翻译。

为了确保阿拉伯语用户界面的质量，需要一些工具。

我们决定创建一个GitHub机器人。他针对与潜在问题匹配的池请求发表评论。该评论没有强加任何内容：它只是提醒您，请参考测试说明以检查更改将如何影响阿拉伯语。僵尸程序会对与填充，字符间距，转换等相对应的更改的行进行注释。CSS代码由PostCSS-RTL转换，因此通常只查看阿拉伯语的更改并确保它看起来不错。可以通过JS设置CSS属性，而PostCSS-RTL不会转换JS。如果在该文件中找到了相应的属性，该机器人也会检查JS文件并对其进行注释。

评论来自tob-bot

（从右到左（通过窥镜

目录