HTML dir=rtl实现阿拉伯语排版与镜像页面布局方法

混合内容中数字和英文为何会乱序

阿拉伯语页面中常常夹杂着拉丁数字（如“v2.4.1”）、URL 或品牌名称。仅仅依靠 dir="rtl" 并不能保证浏览器正确排列这些片段——这需要触发 Unicode 双向算法（UBA），而 HTML 的 dir 属性正是这个算法的开关，CSS 的 direction 属性则无法触发。

• 常见现象：API v2.4.1 在一个纯 dir="rtl" 的容器里，可能会被显示成 1.4.2 v API，连括号的方向都可能被翻转。
• 解决方案：对于需要保持 LTR 顺序的片段，使用 API v2.4.1 或 API v2.4.1 进行显式包裹。
• 注意避坑：不要试图用 direction: ltr 来替代。它只改变视觉上的盒模型方向，不参与 UBA 算法，复制出来的文本顺序可能依然是乱的。

CSS 物理属性（margin-right）在 RTL 下会失效

如果 CSS 中写死了诸如 margin-right: 1rem 或 text-align: right 这样的物理属性，当用户切换语言或系统方向时，这些样式不会自动镜像，直接导致布局错位或文字溢出。

• 应使用逻辑属性：用 margin-inline-end 替代 margin-right，用 text-align: end 替代 text-align: right。这样，无论页面方向如何，样式都会自动适配。
• Flex/Grid 布局的陷阱：Flexbox 和 Grid 的主轴方向在 dir="rtl" 下会自动翻转（例如 flex-direction: row 会表现为 row-reverse）。但如果你手动写了 flex-direction: row-reverse，再叠加 dir="rtl"，就会造成“双重反转”，按钮顺序反而会出错。
• 图标方向需单独处理：像“返回”箭头（←）这样的图标，其指向（向左）是语义的一部分，不能简单地用 transform: scaleX(-1) 进行全局翻转，否则 SVG 路径被镜像后可能失去原有含义。

字体和数字格式是隐藏最深的坑

即便 dir 属性和 CSS 逻辑属性都设置正确，阿拉伯语用户看到的仍可能是断开字符、显示为方块，或者看到西方数字（123）而非他们习惯的东阿拉伯数字（）。

• 字体栈必须明确：字体家族中必须显式包含针对阿拉伯语优化的字体，例如：font-family: "Tajawal", "Cairo", system-ui, sans-serif。避免单独使用“Arial”或“Times New Roman”这类通用字体。
• 优化字体加载：加载阿拉伯语字体时，使用 unicode-range 进行字符范围分割，例如：unicode-range: U+0600-06FF, U+0750-077F。这样可以避免所有语种的用户都下载完整的字体文件。
• 数字本地化：数字格式化必须使用 JavaScript 的国际化 API：Intl.NumberFormat("ar-EG").format(123)。直接硬编码“123”会违反当地用户的阅读习惯。

说到底，实现一个真正的 RTL 界面，远不是“把页面左右翻转一下”那么简单。它牵扯到 Unicode 字符层、CSS 盒模型、字体渲染和 JavaScript 事件流向这四个层面。而最容易被忽略的两点往往是：缺失 lang 属性导致语音合成失败，以及缺失 标签导致混合文本在复制粘贴后变得不可读。