阿拉伯语版本不是把英文站的文字翻译一遍再倒进同一套版式。这些是会在头两秒就失去读者的从右到左错误，以及上线前该测什么。
阿拉伯语网站设计与 RTL：简短答案
你网站的阿拉伯语版本，不是把英文页面的文字翻译后倒进同一套版式。从右到左意味着整个界面都要镜像：导航、Logo 位置、表单标签、进度步骤、箭头，以及海湾访客目光最先落下的那个角。让你丢掉询盘的错误是结构性的，而不是语言性的，而且大多在页面加载后两秒内就能看见。正确设置文档方向，用逻辑 CSS 而不是手工翻转的边距来镜像布局，选一款真正为阿拉伯文设计的字体，并有意识地决定显示哪一套数字。
这四件事做对了，翻译差一点也扛得住；做错了，翻译再完美，读起来仍是一个不是为这位读者而建的外国网站。而且这个赛道比多数出口商想象的更空：据 W3Techs，2026 年 9 月阿拉伯语占其统计网站的 0.6%，英语占 49.5%，所以在大多数竞争对手根本没有阿拉伯语版本的市场里，一个认真做出来的阿拉伯语门面依然醒目。
镜像是版式决定，不是文字对齐
最常见的失败，是把文字右对齐就算完工。方向属于文档本身：html 元素上的 dir 和 lang 属性，让浏览器启用 Unicode 双向算法，每个子元素都继承正确的流向。在此之上，布局本身还要镜像：Logo 和主导航移到右侧，侧栏换边，面包屑从右往左走，三步进度条从右端开始。
并不是所有东西都要镜像，手工翻转样式表正是栽在这里。带拉丁文字标的 Logo 保持原样。媒体播放器控件、时钟，以及任何代表实物的图形都保持朝向。数字、电话号码和拉丁品牌名在从右到左的流向中依然从左往右排，这是双向算法按设计运作，不是 bug。判断标准是含义：在阿拉伯语里，表示“前进”的箭头应指向左边，而表示“下载”的箭头仍然指向下方。
阿拉伯文排版会打破你所有的拉丁文习惯
阿拉伯文是连写的草书，字母形状随其在词中的位置变化，且在基线上下承载的视觉重量比拉丁文更多。由此有三个后果。与英文同样像素大小的阿拉伯文看起来又小又挤，所以多数设计师会调大字号并加大行高，给上下伸部留出空间。阿拉伯文没有拉丁意义上的粗体和斜体：对不含粗体字重的字体做伪粗，会把字母连接处糊掉；合成斜体则干脆就是坏的。用字体家族真正具备的字重、用颜色、或用位置来强调。
字体选择同样不是装饰。系统回退会用设备上恰好有的字体渲染你的阿拉伯文，这正是那么多面向海湾的网站最后看起来像政府表格的原因。选一个拥有真正阿拉伯文字形和配套字重的字体家族，并在有人签字确认前，用真机检查标题号和正文号的效果。
阿拉伯语网站设计与 RTL：数字、日期，以及在漏客户的表单
数字是自信的团队最容易翻车的地方。阿拉伯语有两套数字：海湾和黎凡特通用的阿拉伯-印度数字，以及北非大部分地区使用的西式数字。据 W3C 关于阿拉伯语和波斯语排版需求的工作，国际化库将阿拉伯-印度数字作为阿拉伯文本的默认设置，同时排除了使用西式数字的若干北非与西北非国家。这里没有放之四海皆准的答案，只有你按市场作出、并始终如一执行的决定。同一页上价格用一套、电话号码用另一套，就是那个读起来像不用心的版本。
日期和货币遵循同样的规则：先选定 locale，再让格式化库渲染数值，而不是手工拼接字符串。另一个漏点是表单。标签和占位符右对齐，但邮箱字段、网址字段和国际电话号码必须接受并以从左到右的方式显示输入，否则加号和国家区号会落在错误的位置。上线前，用阿拉伯语姓名、阿拉伯语地址和一个海湾手机号完整填一次真实表单，而且要在手机上做，不要只在桌面端。
上线前要跑的 RTL 检查
- 方向设在根节点。在每个阿拉伯语页面的 html 元素上设置方向和语言属性，而不是在某个容器上加一个 class。然后确认 hreflang 标签让每个语言版本互相指向，这样搜索引擎才会把阿拉伯语页面提供给阿拉伯语查询。
- 用逻辑 CSS，而不是一份镜像样式表。把左右外边距和内边距换成 inline-start 和 inline-end 的对应写法，用逻辑 inset 属性替代 left 和 right。这样一份样式表同时服务两个方向，英文站每改一次，阿拉伯语站也不会再脱节。
- 逐个审查图标与动效。箭头、尖角符、轮播、滑块和滑动手势都要反向；播放按钮、对勾和钟面则不用。在英文里从左侧进场的动画，在阿拉伯语里应从右侧进场。
- 用真实内容，绝不用占位文字。翻译后的阿拉伯文有时比英文原文更短，有时明显更长，所以按钮、导航项和卡片标题必须用真实文案在移动端宽度下测试。
- 上线前让母语读者在正式站点上走一遍。不是校对一个文本文件，而是在手机上真实浏览页面。机器翻译产出的句子语法通顺，却仍然不像利雅得、迪拜或多哈的任何人会说的话。
阿拉伯语网站设计与 RTL：常见问题
- 把方向属性设为 rtl，就足以让网站变成从右到左吗？ — 不够。它设置了文字方向并让浏览器运行双向算法，但布局仍然必须镜像：导航、侧栏、图标、进度指示，以及任何用左右值写出的间距。用 CSS 逻辑属性来构建，能让这种镜像自动发生，而不必手工处理。
- 阿拉伯语网站该用哪套数字？ — 取决于市场。阿拉伯-印度数字是海湾和黎凡特的惯例，而北非大部分地区使用西式数字，这一分野也体现在 W3C 关于阿拉伯语排版需求的工作中。按市场选定一套，并在价格、日期和电话号码上一致使用。
- 我需要一个独立的阿拉伯语网站，还是现有网站的一个语言版本？ — 语言版本，前提是底层布局用逻辑属性构建，且内容模型支持两个方向。独立站点一年之内就会各走各路，hreflang 标签无人维护，搜索引擎也就不再提供正确的版本。
- 翻译明明没错，为什么我的阿拉伯文看起来还是不对？ — 通常是字体问题。一个没有真正阿拉伯文字形的字体家族被伪粗处理，或被系统回退字体悄悄替换，字母连接就断了。设置一款真正支持阿拉伯文的字体，相对拉丁文提高字号和行高，并且绝不使用合成的粗体或斜体。