广告
了解详情
【国际化】阿拉伯语｜RTL页面设计指南
北京/产品设计师/2年前/8289浏览
版权
【国际化】阿拉伯语｜RTL页面设计指南
一、RTL与LTR的区别
当我们谈到“Left to Right”（从左到右）和“Right to Left”（从右到左）语言时，我们实际上是在讨论两种主要的书写方向。两者的区别如下：
- LTR（Left to Right）：这种书写方式是最常见的，被广泛应用于包括英语、法语、德语、西班牙语等在内的许多语言。在这些语言中，文字从页面的左侧开始，向右延伸，视觉焦点是从左到右的；
- RTL（Right to Left）：在一些特定的地区和文化中占据主导地位。例如，阿拉伯语、希伯来语和波斯语等。在这种书写方式中，文字从页面的右侧开始，向左延伸，视觉焦点是从右向左的。
二、RTL布局
在RTL布局中，文本是从右到左阅读的，这与我们常见的从左到右（LTR）布局截然不同。因此，在设计RTL布局时，必须充分考虑这种阅读顺序的差异，以确保用户能够轻松地阅读和理解内容
2.1 flex布局
FlextBox是基于文档的书写模式。作为div块在页面上的布局方式。
2.2 网格布局
当方向是LTR时，侧边栏应该再左边，主内容区在右边。对于RTL模式，则需要镜像处理。当使用CSS网格时，镜像将根据页面的方向自动完成。
三、设计原则
3.1 布局调整
阿拉伯语页面布局需与LTR语言相反，如导航菜单、按钮和表单元素等应从右至左排列。同时，要确保页面元素的对齐和间距在RTL环境下依然保持美观和易读
3.2 文字处理
在展示阿拉伯语文本时，应使用适合该语言的字体，如Naskh、Thuluth等。此外，要正确处理阿拉伯语中的连写、断字和词形变化等特性，以确保文本的准确性和可读性
3.3 图像和图标
在RTL环境中，图像和图标可能需要进行镜像翻转或重新设计，以适应从右到左的阅读习惯
3.4 交互元素
阿拉伯语用户界面的交互元素，如按钮、滑块和下拉菜单等，也应遵循从右到左的布局原则
三、文本
3.1 文本对齐
需要根据界面的方向来控制文本对齐的方式。例如：LTR方向下将文本与内容左对齐，则RTL方向下则需要位置镜像。
3.2 中阿语言混合
3.2.1 段落效果
在混合排版时，需要确保两种语言的文本在视觉上保持平衡，并遵循各自的书写规则。整体的对齐方式可以通过RTL/LTR控制，文本的阅读顺序由语言本身决定。
3.2.2 列表效果
表格与段落的处理方式一致，与界面方向一致，阅读顺序由语言本身决定
3.3 文本省略
当文本需要省略时，需要根据阅读顺序，省略后方内容。省略方向不与界面方向保持一致。
3.4 文本颜色透明度
阿拉伯语中的文字形状可以重叠，如果增加了透明度，某些字体的重叠区域会有明显的接缝，考虑到通用性所以不建议使用透明度。
3.5 大写字母
阿拉伯语没有大写字母，在阿拉伯语中使用大写字母不会有任何效果。
3.6 逗号分隔符
阿拉伯语中的逗号分隔符按照从右到左的顺序，需要做镜像处理。
3.7 下划线
阿拉伯语的文字行高高于中文，增加下划线的话会导致字符中部分元素位于下划线下方，体验感较差，不建议使用。
四、字体
4.1 字体选择
选择字体的时候必须要保证良好的可读性，一般不使用粗体，路径太粗会影响细节，而且字母的点非常小，不易识别。建议使用
Google Noto
字体，比浏览器默认字体显示更清晰。
4.2 行高
阿拉伯语的文字高度高于中文，可能导致在与其他语言混合排版时出现对齐问题。如果按照文字本身的高度设置行高，则会出现内容被截断的现象，建议文字均使用1.5倍行高，以确保整体布局的美观和易读性。
4.3 字间距
阿拉伯语是草书。一个单词中的大部分字符都是连接在一起的。因此，阿拉伯语中不应该使用字间距，它会将一个单词的字符撕开，打破了阿拉伯语单词的草书性质
4.4 字体面积
同样的文本内容，阿拉伯语占用的空间可能会更少，在一些需要强调的内容展示上，例如按钮、标题等地方需要对字号适当加大，用来弥补视觉差异。
五、阿拉伯数字
不同的RTL语言可以使用不同的数字系统。例如：希伯来语文本中使用西方阿拉伯数字，而阿拉伯语文本中可能同时使用西方和东方阿拉伯数字。西方和东方阿拉伯数字的使用因国家和地区而异，甚至在同一国家或地区内也是如此。
5.1 西方阿拉伯数字
西方阿拉伯数字由0，1，2，3，4，5，6，7，8，9共10个计数符号组成。采取位值法，高位在左，低位在右，从左往右书写。
5.2 东方阿拉伯数字
用法与西方阿拉伯数字一致，写法上有所差异。千位分隔符用点分隔，小数点用逗号。
5.3 数字区间需要镜像
RTL模式下数字本身及数字的顺序无需镜像，但是数字区间因为涉及到了阅读顺序，则出现把左右两方的内容位置对调。
六、方向/进度控制
6.1 时间的推移需要镜像
人们倾向于将阅读的顺序作为前进的方向。因此进度或者方向指示勒的控件是需要镜像的，帮助用户按照固定的顺序访问内容。例如：在RTL语言中，后退按钮必须指向右侧，以便于与阅读顺序相匹配。同理，上一个、下一个等元素也需要左右镜像。
6.2 媒体播放器不需要镜像
播放按钮和媒体进度指示器等媒体控件始终运行 LTR。这是因为媒体控制反映了盒式磁带播放器在盒式磁带中滚动磁带的方式。所以包含播放/暂停/停止按钮的元素永远不会翻转
七、图标
7.1 需镜像类型
7.1.1 与方向相关的图标
与方向相关的图标通常需要镜像处理。这是因为这些图标在RTL布局中的方向应该与文本的阅读方向一致。例如，箭头、音量等图标可能需要镜像以适应RTL布局
7.1.2 与现实形态相反
与现实形态相反的图标也需要进行镜像处理。由于两地的习惯差异，导致现实中元素形态也有所不同。例如：书本、浏览器页面等图标需要在RTL布局中镜像以符合当地的阅读习惯
7.2 无需镜像类型
7.2.1 反斜线
反斜线图标在RTL布局中通常不需要镜像，因为它们本身没有明确的方向性。如果除斜杠外的图标元素有方向性，则只有图标元素镜像，反斜杠不镜像。
7.2.2 与现实形态一致
由于各地的某些元素物理形态一致，大家认知上比较统一，也不需要做镜像处理。
7.2.3 镜像前后无区别
这类图标通常具有左右对称的特性，镜像前后并无区别，无需特殊处理。
7.2.4 偏向右手操作
便于右手操作的图标，如搜索图标或杯子图标，在RTL布局中也不需要镜像，因为各地的大都习惯用右手操控，符合用户认知习惯。
7.3 图标中涉及文本
图标中涉及到文本时，需要把文本转化为当地语言中的内容，易于理解。
7.4 禁止镜像
7.4.1 logo
logo涉及到品牌形象，镜像后会导致侵权。
7.4.2 通用样式
通用类图标，各地的用法习惯一致，无需镜像。
7.5 禁止使用带猪的形象
在RTL模式下，禁止使用带猪的形象是出于文化敏感性的考虑。在伊斯兰教中，猪被视为不洁之物，因此在阿拉伯国家的RTL设计中使用猪的形象可能会引起冒犯或不适。
八、图片
8.1 图片顺序镜像
当图片的顺序有意义时，需要翻转他们的位置。例如，如果以特定顺序（如时间顺序、字母顺序或操作顺序）显示多个图片时，需要翻转他们的位置以保证RTL上下文中的顺序含义
8.2 禁止镜像图片本身
避免镜像图片本身，如照片、插图等。镜像图片可能会改变图片的含义，或造成侵权。如果图片的内容与阅读方向密切相关，请考虑创建新的图片，而不是镜像原始图片。
九、日历
9.1 回历与公历
- 阿拉伯回历主要在沙特阿拉伯使用。虽然他们在某种程度上仍然承认并遵循公历，但许多出版物和网站都使用回历。沙特航空等一些网站允许同时显示公历和回历。还有波斯历和希伯来历。将需要根据本地化对象进行特定的日历更改。
- RTL 与 LTR 日历— 无论是回历还是公历，如果它是用英文书写的（带有“英文”数字），则日历显示 LTR。但是，如果它是阿拉伯语，则日历会翻转并显示为 RTL。有时日历会是阿拉伯语，但仍然使用“英语”数字。在那些情况下，日历仍然是 RTL。
9.2 工作周
沙特的工作周从周日到周四，周五和周六为周末。因此，所有沙特日历都从星期日开始。这不一定是整个中东地区的情况，尽管从星期日开始日历在美国很普遍。
9.3 节假日
各个国家的节假日均不相同，需要提供节假日具体日期自定义的功能。
十、示例
10.1 音量
根据RTL布局的规则进行镜像处理。组件中的元素和指示符需要与文本的阅读方向保持一致。在音量组件中，音量滑块和音量指示符可能需要镜像以适应RTL布局。
10.2 评分
颠倒显示的进度或者计数方向，禁止翻转数字本身。
10.3 消息通知
✅图标为通用样式，无需镜像，整体布局改为从右到左。
10.4 骨架屏
作为内容加载容器，引导用户视觉焦点，也需要根据界面方向做相应的布局调整。
10.5 富文本编辑器
需要将工具栏的操作全部做镜像处理，同时内容段落的输入也改为从右至左。
10.6 进度条
进度条同样遵循RTL原则，受阅读方向的改变，所以整体的方向需要改变，但是标识的刻度数字本身无需镜像。
10.7 时间轴
左右布局翻转，内容区域的文字改为右对齐，按照RTL原则，浏览顺序为从右至左。时间段顺序也改为从右至左。
十一、自动化工具（可参考）
10.1 Bi-App-Sass
- Anas Nakawa的Bi-App-Sass允许编写一次样式表，然后将其编译为两个不同的样式表，一个用于LTR，另一个用于RTL。
- 工具地址：https://github.com/anasnakawa/bi-app-sass
10.2 RTLCSS
- Mohammad Younes的RTLCSS是一个将LTR样式表转换为RTL的框架。
- 这个工具的不同之处在于它只在CSS文件的构建版本上运行。例如，如果你有一个包含50多个Sass组件的项目，RTLCSS将很方便地解析编译的CSS文件并创建它的RTL版本。
- 工具地址：https://rtlcss.com/
十二、如何创建RTL界面「神奇" 的 direction」【内容撰写人：liuwj@】
12.1 声明方向
RTL 界面的第一步是将代码 dir="rtl" 添加到 <html> 标记中——方向性可以设置为 ltr（从左到右）或rtl（从右到左）。这个属性几乎翻转了整个界面。
12.1.1 自定义类css用法
- .className img { float:right; }
- .rtl .className img { float:left; }
12.1.2 多语切换时，增加动态类标签
- 在 body 标签中添加动态类，这样当我们遇到 RTL 语言（如阿拉伯语）时，我们可以将内容设置为相应类的样式。
- 当选择阿拉伯语时，在上面的代码中它会触发custom- rtl类，所有的RTL样式都是在这个类中编写的。
- 只要 custom-rtl 类触发，RTL 样式就会应用。
12.2 借助css属性
12.3 使用direction属性
- CSS 中的direction设置块级元素内内容流的方向。这适用于文本、行内和行内块元素。它还设置文本的默认对齐方式和表格单元格在表格行中的流动方向。以上步骤是RTLing任何网站内容的基本标准。但是当涉及到大型应用程序时，我们需要从右到左的角度来考虑整个系统。
- direction 只能改变 display: flex/inline-block 元素的书写方向，对于 float/绝对定位布局就无能为力，更别谈复杂的页面布局，比如 BFC 布局、双飞翼、圣杯布局等。
- direction 无法改变 margin, padding, border 的水平方向，也就是说除非你的元素是居中的，否则当你的元素是不对称的话，即使你改变了元素的书写方向和顺序，margin-left 还是指向左边的，它并不会留出右边的空白。
12.4 "神奇" 的 transform 镜像翻转
CSS3 的 transform 属性，通过 transform: scaleX(-1) 可以使页面沿着中轴进行水平翻转
12.4.1 将现有的用户界面快速改为RTL界面
- 修改CSS样式表：将CSS样式表中的左对齐（left）属性替换为右对齐（right）属性，并将其它相关属性（如文本对齐）也进行相应修改。对于某些元素，还需要改变它们的宽度、高度和位置等属性
- 更改文本方向：在文本方向上，需要将文本从左往右改为从右往左，以适应RTL界面。这可以通过在HTML或CSS中使用dir属性或unicode-bidi属性来实现
- 处理图像和图标：如果应用程序或网站中包含图像和图标等元素，这些元素也需要进行相应的修改，以便它们在RTL界面中正确显示
- 测试和调试：在修改完成后，需要对应用程序或网站进行测试和调试，以确保它们在RTL界面下正常工作并且没有显示错误
- 需要注意的是，以上只是实现RTL界面的一些基本步骤，具体的实现方式可能因开发平台、框架和技术的不同而有所不同。因此，对于一个具体的应用程序或网站，可能需要根据具体情况进行定制化的修改
总结
- 阿拉伯语言界面可以实现，尤其是使用Flex技术的layout布局，对RTL非常友好；
- 需要从底层开始做增量修改，涉及css样式匹配、字体匹配、控件匹配、UI特性匹配；
- 需要遍历整个系统，需要考虑从右到左翻转的每个内容，工作量很大，非常乏味且非常容易混乱；
- 需要css样式表重写、动态类支持、需要开发RTL插件，需要全部重新测试；
- 可以尝试做工具插件批量抽取
阿拉伯语——大约有 7 亿人。另有 1.1 亿人讲波斯语（也称为波斯语），而 900 万讲希伯来语。这加起来大约有 8.2 亿人。阿拉伯语RTL本地化设计是一项复杂而重要的任务。通过了解阿拉伯语书写习惯、遵循设计原则以及进行充分的测试与优化，我们可以为阿拉伯语用户提供更好的产品和服务体验。随着全球阿拉伯语用户群体的不断扩大，重视阿拉伯语RTL本地化设计将成为企业和开发者不可或缺的一部分。
主流大厂文档参考
SalesforceRTL语音支持文档地址：https://help.salesforce.com/s/articleView?id=sf.faq_getstart_rtl.htm&type=5
bootstrap的RTL镜像页面：https://bootstrap.rtlcss.com/docs/4.0/utilities/flex/
MUI的文档说明：https://mui.com/material-ui/guides/right-to-left/
chakra ui 的文档说明：https://chakra-ui.com/docs/styled-system/rtl-support
安卓的文档：https://www.mdui.org/design/usability/bidirectionality.html#bidirectionality-localization
苹果的文档：https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left/
Getuikit：https://getuikit.com/docs/rtl
CoreUi：https://coreui.io/docs/getting-started/rtl/
WIKI：https://en.wikipedia.org/wiki/Right-to-left_script
AntD：https://ant.design/components/config-provider-cn?direction=rtl
141
举报
声明
273
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
99+登录即可同步推荐记录哦
99+登录即可加入我的收藏
评论登录即可评论想法
分享分享