很多团队把阿语站的RTL适配理解成"把 dir 属性改成 rtl 就完事"，结果上线后出现按钮跑位、图标方向反了、表单提示挤在一起等各种问题。结合多年阿语建站经验，本文把RTL适配拆成五个层面，逐项说明常见问题与处理思路。
一、RTL不是"翻译完再翻转"
dir="rtl" 只改变文本方向与默认对齐，并不会自动翻转写死的 left/right、绝对定位与浮动布局。阿语站应从设计稿阶段就按右到左的信息流来画：Logo 与主导航在右侧、行动按钮在左、阅读动线整体从右向左。如果设计稿本身是LTR思维，后续靠CSS硬翻，细节问题会层出不穷。
二、用CSS逻辑属性替代物理属性
处理镜像问题的现代做法是使用逻辑属性，让一套代码同时适配两个方向：
margin-inline-start/padding-inline-end替代基于左右的间距inset-inline-start替代基于左右的定位text-align: start替代text-align: left- Flex与Grid布局在rtl上下文中会自动反转排列方向，尽量少写死顺序
对需要兼容老设备的项目，可保留物理属性写LTR、再单独维护 [dir="rtl"] 覆盖规则，但逻辑属性已是更省维护成本的选择。
三、图标与组件的方向语义
并非所有图标都要镜像。带方向含义的元素——返回箭头、轮播控制、进度条、面包屑分隔符、时间轴——在RTL下需要翻转或换边；而播放键、搜索放大镜、Wi-Fi等国际惯例图标保持原样。建议在设计阶段就给图标标注"镜像/不镜像"，前端按语义处理，而不是全局 transform 一刀切。
四、bidi双向混排的高频坑
阿语句子中夹杂数字、英文品牌名、电话号码、型号时，容易出现顺序错乱，这是双向文本（bidi）机制导致的。常见处理：
- 用户生成内容（评论、姓名、地址输入框）设置
dir="auto"，按首字符自动判向 - 型号、编号等需要严格从左读的片段用
<bdi>或unicode-bidi: isolate包裹 - 表单校验提示、价格单位（AED/SAR）与金额的拼接顺序要单独验证
五、阿语字体与排版细节
阿语是连写文字，字母形态随位置变化，行高与字号体系不能照搬中文站经验。建议行高取1.8到2.0，避免裁切字母上下的点与长音符号。字体推荐使用SIL OFL开源授权的Cairo、Tajawal、Almarai、IBM Plex Sans Arabic等，商用无版权风险，跨设备显示一致；不要只用系统默认字体——不同手机渲染差异明显。另外注意：对阿语字体做子集化时要保留连写字形，否则会出现断笔。
六、日期、数字与本地习惯
中东地区公历与伊斯兰历（希吉来历）并行，宗教节日与营销节点按希吉来历确定。数字方面，海湾用户对西方数字（0-9）接受度普遍较高，但面向北非或正式场合可提供阿拉伯-印度数字（٠١٢٣）选项。日期格式、周起始日（多数阿语国家以周日或周六为一周之始）也应按目标国配置，而不是全局统一。
七、上线前测试清单
- Chrome、Safari、Firefox 及 Android WebView 下逐页过一遍
- 表单输入阿拉伯文与英文混合内容，检查输入框内光标与选区方向
- 轮播、手风琴、下拉菜单的展开方向是否正确
- 页脚链接、面包屑、分页控件的顺序是否符合右到左阅读
- 移动端小屏下阿语连写是否清晰、有无裁切
经验之谈：RTL问题绝大多数集中在"想当然"的组件上——轮播、面包屑、价格区间滑块、步骤条。这四类组件建议列入必测项。