收录了阿拉伯语站点之后：目录站的 RTL 布局和那份图标清单

把一段阿拉伯语塞进一个从左到右的页面，最常见的现象不是文字靠右了，而是括号和加号跑到了句子另一头、数字顺序看起来是反的、面包屑的箭头还指着原来的方向。

这些都不是 bug，是双向文本算法在正常工作的结果，只是你的布局没告诉它页面该往哪边走。

图片来源：网络，版权归原作者所有，侵权请联系删除

lang 和 dir 是两个属性

第一个容易搞混的点：语言和方向是独立的。写了 lang="ar" 但没写 dir="rtl"，浏览器照样从左往右排版，只是拼写检查和字体选对了。两个都要给，而且方向要写在根节点上——弹性盒子和网格会继承它，表单控件也读它，只在某个 div 上写会漏掉一半。

目录站的实际处理通常是整页 dir="rtl" 只在该语言版本下切换，条目卡片里的原文站点名则单独隔离。

物理属性换成逻辑属性

这张对照表值得直接贴在项目 wiki 里，因为每次 review 都会用到：

物理写法	逻辑写法	在 RTL 下的效果
margin-left	margin-inline-start	变成右边距
padding-right	padding-inline-end	变成左内边距
left / right	inset-inline-start / end	起点跟着阅读方向走
text-align: left	text-align: start	靠阅读起点对齐
border-left	border-inline-start	边框换到另一侧

弹性盒子和网格不用改，一行布局本来就沿着行内轴排，方向一翻转列顺序自然跟着变。真正需要改的是那些写死的左右值——样式表里每一个 left 都是一处关于"读者从哪边开始"的硬编码假设，写的时候省事，找的时候要翻遍整个文件。

图标镜像要做一次人工判断

哪些图标该左右翻转，样式表推不出来，得一个个过。判断标准是这个图标表达的是什么：

• 该镜像的：返回和前进箭头、下一页的尖角、进度条和步骤条、撤销重做、回复、列表缩进、面包屑分隔符。它们表达的是方向和顺序。
• 不该镜像的：播放键（它跟的是磁带走带方向，已成惯例）、时钟表盘、对勾、星标、放大镜、公司标志、带文字或数字的图标。它们表达的是实物或通用约定。

实现上用 :dir(rtl) 伪类比 [dir="rtl"] 后代选择器稳，前者能匹配从祖先继承来的方向，也能匹配 dir="auto" 算出来的方向。做完把这份清单留下来，下次加图标照着判断，不用重新讨论一遍。

混合方向的文本要隔离

真实内容几乎都是混排的：阿拉伯语句子里夹一个英文品牌名，希伯来语段落里放一个邮箱地址，用户名是用户自己填的、方向未知。双向算法能处理大部分，但在边界上的中性字符——括号、连字符、句点——经常被摆到错误的一侧。

处理工具有三个，各管一种情况：

<bdi> 元素用来包方向未知的内容，比如从数据库里取出来的用户名，它的方向由内容自己决定，而且不会干扰外面那段文字的排序。这是目录站条目页最常缺的一个标签。

dir="auto" 加在自由文本上，浏览器按第一个强方向字符判断，评论区、搜索框、表单输入都该用它——哪怕界面本身是中文，用户也可能打一段阿拉伯语进去。

CSS 里的 unicode-bidi: isolate 等价于元素级的隔离，plaintext 则让每段自己判断方向，适合整块的 UGC 内容。价格、SKU、代码片段这类必须保持左起的内容，显式写 direction: ltr 加隔离。

还有两件小事

阿拉伯语、波斯语、乌尔都语的字母是连写的，加了字间距就会断开连接，看起来像坏了。中文站常有的 letter-spacing 全局设置要在这几个语言下清零。字体也要单独准备，Noto Sans Arabic 这类覆盖面够广的字体是省事的选择。

验收方法很土但有效：在开发者工具里给根节点加上 dir="rtl"，用真实语种的真实条目数据过一遍列表页、条目页和表单。剩下的那几个硬编码 left，只有在这种"其他东西都翻过去了"的画面上才看得见。