阿拉伯语RTL设计浅谈

当我们谈到“Left to Right”（从左到右）和“Right to Left”（从右到左）语言时，我们实际上是在讨论两种主要的书写方向。两者的区别如下：

在RTL布局中，文本是从右到左阅读的，这与我们常见的从左到右（LTR）布局截然不同。因此，在设计RTL布局时，必须充分考虑这种阅读顺序的差异，以确保用户能够轻松地阅读和理解内容。

FlextBox是基于文档的书写模式。作为div块在页面上的布局方式。

当方向是LTR时，侧边栏应该再左边，主内容区在右边。对于RTL模式，则需要镜像处理。当使用CSS网格时，镜像将根据页面的方向自动完成。

阿拉伯语页面布局需与LTR语言相反，如导航菜单、按钮和表单元素等应从右至左排列。同时，要确保页面元素的对齐和间距在RTL环境下依然保持美观和易读。

在展示阿拉伯语文本时，应使用适合该语言的字体，如Naskh、Thuluth等。此外，要正确处理阿拉伯语中的连写、断字和词形变化等特性，以确保文本的准确性和可读性。

在RTL环境中，图像和图标可能需要进行镜像翻转或重新设计，以适应从右到左的阅读习惯。

阿拉伯语用户界面的交互元素，如按钮、滑块和下拉菜单等，也应遵循从右到左的布局原则。

需要根据界面的方向来控制文本对齐的方式。例如：LTR方向下将文本与内容左对齐，则RTL方向下则需要位置镜像。

在混合排版时，需要确保两种语言的文本在视觉上保持平衡，并遵循各自的书写规则。整体的对齐方式可以通过RTL/LTR控制，文本的阅读顺序由语言本身决定。

表格与段落的处理方式一致，与界面方向一致，阅读顺序由语言本身决定。

当文本需要省略时，需要根据阅读顺序，省略后方内容。省略方向不与界面方向保持一致。

阿拉伯语中的文字形状可以重叠，如果增加了透明度，某些字体的重叠区域会有明显的接缝，考虑到通用性所以不建议使用透明度。

阿拉伯语没有大写字母，在阿拉伯语中使用大写字母不会有任何效果。

阿拉伯语中的逗号分隔符按照从右到左的顺序，需要做镜像处理。

阿拉伯语的文字行高高于中文，增加下划线的话会导致字符中部分元素位于下划线下方，体验感较差，不建议使用。

选择字体的时候必须要保证良好的可读性，一般不使用粗体，路径太粗会影响细节，而且字母的点非常小，不易识别。建议使用

字体，比浏览器默认字体显示更清晰。

阿拉伯语的文字高度高于中文，可能导致在与其他语言混合排版时出现对齐问题。如果按照文字本身的高度设置行高，则会出现内容被截断的现象，建议文字均使用1.5倍行高，以确保整体布局的美观和易读性。

阿拉伯语是草书。一个单词中的大部分字符都是连接在一起的。因此，阿拉伯语中不应该使用字间距，它会将一个单词的字符撕开，打破了阿拉伯语单词的草书性质。

同样的文本内容，阿拉伯语占用的空间可能会更少，在一些需要强调的内容展示上，例如按钮、标题等地方需要对字号适当加大，用来弥补视觉差异。

不同的RTL语言可以使用不同的数字系统。例如：希伯来语文本中使用西方阿拉伯数字，而阿拉伯语文本中可能同时使用西方和东方阿拉伯数字。西方和东方阿拉伯数字的使用因国家和地区而异，甚至在同一国家或地区内也是如此。

西方阿拉伯数字由0，1，2，3，4，5，6，7，8，9共10个计数符号组成。采取位值法，高位在左，低位在右，从左往右书写。

用法与西方阿拉伯数字一致，写法上有所差异。千位分隔符用点分隔，小数点用逗号。

RTL模式下数字本身及数字的顺序无需镜像，但是数字区间因为涉及到了阅读顺序，则出现把左右两方的内容位置对调。

人们倾向于将阅读的顺序作为前进的方向。因此进度或者方向指示勒的控件是需要镜像的，帮助用户按照固定的顺序访问内容。例如：在RTL语言中，后退按钮必须指向右侧，以便于与阅读顺序相匹配。同理，上一个、下一个等元素也需要左右镜像。

播放按钮和媒体进度指示器等媒体控件始终运行 LTR。这是因为媒体控制反映了盒式磁带播放器在盒式磁带中滚动磁带的方式。所以包含播放/暂停/停止按钮的元素永远不会翻转。

与方向相关的图标通常需要镜像处理。这是因为这些图标在RTL布局中的方向应该与文本的阅读方向一致。例如，箭头、音量等图标可能需要镜像以适应RTL布局。

与现实形态相反的图标也需要进行镜像处理。由于两地的习惯差异，导致现实中元素形态也有所不同。例如：书本、浏览器页面等图标需要在RTL布局中镜像以符合当地的阅读习惯。

反斜线图标在RTL布局中通常不需要镜像，因为它们本身没有明确的方向性。如果除斜杠外的图标元素有方向性，则只有图标元素镜像，反斜杠不镜像。

由于各地的某些元素物理形态一致，大家认知上比较统一，也不需要做镜像处理。

这类图标通常具有左右对称的特性，镜像前后并无区别，无需特殊处理。

便于右手操作的图标，如搜索图标或杯子图标，在RTL布局中也不需要镜像，因为各地的大都习惯用右手操控，符合用户认知习惯。

图标中涉及到文本时，需要把文本转化为当地语言中的内容，易于理解。

logo涉及到品牌形象，镜像后会导致侵权。

通用类图标，各地的用法习惯一致，无需镜像。

在RTL模式下，禁止使用带猪的形象是出于文化敏感性的考虑。在伊斯兰教中，猪被视为不洁之物，因此在阿拉伯国家的RTL设计中使用猪的形象可能会引起冒犯或不适。

当图片的顺序有意义时，需要翻转他们的位置。例如，如果以特定顺序（如时间顺序、字母顺序或操作顺序）显示多个图片时，需要翻转他们的位置以保证RTL上下文中的顺序含义。

避免镜像图片本身，如照片、插图等。镜像图片可能会改变图片的含义，或造成侵权。如果图片的内容与阅读方向密切相关，请考虑创建新的图片，而不是镜像原始图片。

沙特的工作周从周日到周四，周五和周六为周末。因此，所有沙特日历都从星期日开始。这不一定是整个中东地区的情况，尽管从星期日开始日历在美国很普遍。

各个国家的节假日均不相同，需要提供节假日具体日期自定义的功能。

根据RTL布局的规则进行镜像处理。组件中的元素和指示符需要与文本的阅读方向保持一致。在音量组件中，音量滑块和音量指示符可能需要镜像以适应RTL布局。

颠倒显示的进度或者计数方向，禁止翻转数字本身。

✅图标为通用样式，无需镜像，整体布局改为从右到左。

作为内容加载容器，引导用户视觉焦点，也需要根据界面方向做相应的布局调整。

需要将工具栏的操作全部做镜像处理，同时内容段落的输入也改为从右至左。

进度条同样遵循RTL原则，受阅读方向的改变，所以整体的方向需要改变，但是标识的刻度数字本身无需镜像。

左右布局翻转，内容区域的文字改为右对齐，按照RTL原则，浏览顺序为从右至左。时间段顺序也改为从右至左。

CoreUi：https://coreui.io/docs/getting-started/rtl/

WIKI：https://en.wikipedia.org/wiki/Right-to-left_script

人人都是产品经理：https://www.woshipm.com/ucd/5634859.html

MUI的文档说明：https://mui.com/material-ui/guides/right-to-left/

AntD：https://ant.design/components/config-provider-cn?direction=rtl

SalesforceRTL语音支持文档地址：https://help.salesforce.com/s/articleView?id=sf.faq_getstart_rtl.htm&type=5

Android文档：https://www.mdui.org/design/usability/bidirectionality.html#bidirectionality-localization

Apple文档：https://developer.apple.com/cn/design/human-interface-guidelines/right-to-left

阿拉伯语人群大约有 4.4 亿人，另有 1亿人讲波斯语，而 900 万讲希伯来语。这加起来大约有 5.5 亿人。阿拉伯语RTL本地化设计是一项复杂而重要的任务。通过了解阿拉伯语书写习惯、遵循设计原则以及进行充分的测试与优化，我们可以为阿拉伯语用户提供更好的产品和服务体验。随着全球阿拉伯语用户群体的不断扩大，重视阿拉伯语RTL本地化设计将成为企业和开发者不可或缺的一部分。