必须在上设dir="rtl"，因为浏览器仅在根元素带dir属性时才完整启用rtl感知机制；局部设置或仅用css会导致光标错乱、tab流不翻转、flex轴向不变、滚动条位置错误及第三方库样式失效。

必须在 上设 dir="rtl"，否则光标、Tab 流、Flex 轴向、滚动条位置等关键行为不会真正翻转 —— 局部设置或只靠 CSS 是无效的。

为什么只能从 开始设 dir="rtl"

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

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

dir="auto" 在生产环境几乎不可用

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


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 首字符是空格、换行、ASCII 字母（如 "Hello"）、数字（如 "123"）→ 直接 fallback 到 ltr，哪怕后面全是阿拉伯语
• 首字符是中文/日文/韩文（Unicode “弱方向性” 字符）→ 同样 fallback 到 ltr
• JS 动态插入内容（el.innerHTML = text）后不会重新检测方向
• Safari ≤17.3 对带变音符号的阿拉伯字符识别不稳定
• 绝对不要用于导航栏文字、表单 <label></label>、按钮文案等核心 UI 文本

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

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

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

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

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

• 读取一次 offsetHeight 或 getComputedStyle(document.documentElement).direction
• SSR 渲染必须初始输出 ，避免 hydration 不一致
• 不要只操作 或局部节点，那只是视觉欺骗，表单控件内部逻辑仍按 LTR 运行
• 若用 CSS 逻辑属性（如 margin-inline-start），需确认其值随 dir 自动适配，而非硬编码 margin-right

真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi></bdi> —— 大多数 bug 都出在“以为设了 dir="rtl" 就结束了”，结果阿拉伯语里的英文 URL 被拆成两行还反向换行，或者输入框光标始终卡在左边。