必须在<html>上设dir="rtl"，因为浏览器仅当根元素带dir属性时才启用完整RTL机制；改<body>或局部div无效，会导致光标、Tab流、<select>下拉、滚动条等行为异常，且第三方库依赖根方向生成类名。
必须在 <html> 上设 dir="rtl"，否则阿拉伯语页面的光标、Tab 流、<select> 下拉方向、滚动条位置等关键行为全部失效。
为什么只改 <body> 或局部 div 的 dir 不行
浏览器只在根元素（<html>）带 dir 属性时，才完整启用 RTL 感知机制。这不是“推荐”，而是底层行为依赖：
-
<body dir="rtl">会导致<input>光标仍从左入、退格方向错乱、双击选词反向 -
<select>下拉项不翻转、<textarea>placeholder 不右对齐 - Flex 容器的
justify-content: flex-start仍指向左边，主轴起点没变 - 滚动条卡在右侧（即使系统支持 RTL），因为滚动行为未被根方向触发
- 第三方 UI 库（如 MUI、Bootstrap）依赖
<html>的继承方向生成类名（如ms-2→me-2），没设对就全失效
dir="auto" 在生产环境基本不可用
它依赖首个“强方向字符”判断方向，而真实内容常不满足条件：
- 首字符是空格、换行、ASCII 字母（如
"Hello"）、数字（如"123"）→ 直接 fallback 到ltr，哪怕后面全是阿拉伯语 - 首字符是中文/日文/韩文（Unicode “弱方向性” 字符）→ 同样 fallback 到
ltr - Safari ≤17.3 对带变音符号的阿拉伯字符识别不稳定
- 绝对不要用于导航栏文字、表单
<label>、按钮文案等核心 UI 文本
混合文本必须用 <bdi>，不是 dir="auto" 或 <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>包裹更简明
动态切换时不能只改 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; } 兼容写法。
