必须在<html>上设dir="rtl"，因为浏览器仅在根元素带dir属性时才完整启用RTL感知机制；局部设置或仅用CSS会导致光标错乱、Tab流不翻转、Flex轴向不变、滚动条位置错误及第三方库样式失效。
必须在 <html> 上设 dir="rtl"，否则光标、Tab 流、Flex 轴向、滚动条位置等关键行为不会真正翻转 —— 局部设置或只靠 CSS 是无效的。
为什么只能从 <html> 开始设 dir="rtl"
浏览器只在根元素带 dir 属性时，才完整启用 RTL 感知机制。这不是“推荐”，而是底层行为依赖：
-
<body dir="rtl">或<div dir="rtl">会导致<input>光标仍从左入、退格方向错乱、双击选词反向 -
<select>下拉项不翻转、<textarea>placeholder 不右对齐、Tab 键焦点流保持 LTR 顺序 - Flex 容器的
flex-direction: row不自动将主轴起点设为右侧，justify-content: flex-start仍指向左边 - 滚动条卡在右侧（即使系统支持 RTL），因为滚动行为未被根方向触发
- 第三方 UI 库（如 MUI、Bootstrap）依赖
<html>的继承方向生成类名（如ms-2→me-2），没设对就全失效
dir="auto" 在生产环境几乎不可用
它依赖首个“强方向字符”判断，而真实内容常不满足条件：
- 首字符是空格、换行、ASCII 字母（如
"Hello"）、数字（如"123"）→ 直接 fallback 到ltr，哪怕后面全是阿拉伯语 - 首字符是中文/日文/韩文（Unicode “弱方向性” 字符）→ 同样 fallback 到
ltr - JS 动态插入内容（
el.innerHTML = text）后不会重新检测方向 - Safari ≤17.3 对带变音符号的阿拉伯字符识别不稳定
- 绝对不要用于导航栏文字、表单
<label>、按钮文案等核心 UI 文本
混合文本该用 <bdi>，不是 dir="auto" 或 <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 渲染必须初始输出
<html lang="ar" dir="rtl">，避免 hydration 不一致 - 不要只操作
<body>或局部节点，那只是视觉欺骗，表单控件内部逻辑仍按 LTR 运行 - 若用 CSS 逻辑属性（如
margin-inline-start），需确认其值随dir自动适配，而非硬编码margin-right
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi> —— 大多数 bug 都出在“以为设了 dir="rtl" 就结束了”，结果阿拉伯语里的英文 URL 被拆成两行还反向换行，或者输入框光标始终卡在左边。
