HTML全局属性dir在阿拉伯语等右向左排版中的设计规范-html教程-PHP中文网

必须在上设dir="rtl"，因为浏览器仅当根元素带dir属性时才启用完整rtl机制；改或局部div无效，会导致光标、tab流、下拉、滚动条等行为异常，且第三方库依赖根方向生成类名。

html全局属性dir在阿拉伯语等右向左排版中的设计规范

必须在上设 dir="rtl"，否则阿拉伯语页面的光标、Tab 流、<select></select> 下拉方向、滚动条位置等关键行为全部失效。

为什么只改或局部 `div` 的 `dir` 不行

浏览器只在根元素（）带 dir 属性时，才完整启用 RTL 感知机制。这不是“推荐”，而是底层行为依赖：

会导致 <input> 光标仍从左入、退格方向错乱、双击选词反向
<select></select> 下拉项不翻转、<textarea></textarea> placeholder 不右对齐
Flex 容器的 justify-content: flex-start 仍指向左边，主轴起点没变
滚动条卡在右侧（即使系统支持 RTL），因为滚动行为未被根方向触发
第三方 UI 库（如 MUI、Bootstrap）依赖的继承方向生成类名（如 ms-2 → me-2），没设对就全失效

`dir="auto"` 在生产环境基本不可用

它依赖首个“强方向字符”判断方向，而真实内容常不满足条件：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

首字符是空格、换行、ASCII 字母（如 "Hello"）、数字（如 "123"）→ 直接 fallback 到 ltr，哪怕后面全是阿拉伯语
首字符是中文/日文/韩文（Unicode “弱方向性” 字符）→ 同样 fallback 到 ltr
Safari ≤17.3 对带变音符号的阿拉伯字符识别不稳定
绝对不要用于导航栏文字、表单 <label></label>、按钮文案等核心 UI 文本

混合文本必须用 `<bdi></bdi>`，不是 `dir="auto"` 或 `<bdo></bdo>`

当文本来自 API（如用户名、搜索词），方向不确定且可能混排（如 "أحمد123"），必须用语义化隔离：

<bdi>{{username}}</bdi>：触发独立 Bidi 隔离上下文，不污染父级方向，所有现代浏览器支持良好
{{username}}：无隔离能力，旧版 Safari 不识别，括号重排失败
<bdo dir="rtl">{{username}}</bdo>：强制覆盖，会把 "123" 显示成 "321"，仅适合调试
<p dir="rtl">نص عربي <bdi>https://example.com</bdi></p>：对已知 RTL 主体中的 LTR 片段（如 URL），直接用 <bdi></bdi> 包裹更简明

动态切换时不能只改 `document.documentElement.dir`

执行 document.documentElement.dir = "rtl" 后，还需主动触发重排，否则部分浏览器（尤其旧版 Safari）延迟生效：

读取一次 offsetHeight 或 getComputedStyle(document.documentElement).direction
必须同步设置 lang 属性：document.documentElement.setAttribute("lang", "ar")，否则字体连字、数字样式、屏幕阅读器语音规则均不生效
避免直接改 document.body.dir —— 这会全局影响非编辑区域（如弹窗、菜单、状态栏）

最易被忽略的是：CSS 的 margin-left、float: left、left: 10px 等物理属性完全不会随 dir="rtl" 自动翻转，必须手动改用 margin-inline-start、float: inline-start、inset-inline-start，或加 dir(rtl) { right: 10px; } 兼容写法。