必须在<html>元素上设置dir="rtl"才能实现整页RTL，否则表单焦点、光标行为、Flex轴向等关键逻辑无法正确翻转；dir="auto"不可靠，混合文本应使用<bdi>隔离。
必须在 <html> 元素上设置 dir="rtl" 才能真正实现整页 RTL，只改 CSS 或局部容器会漏掉表单焦点、光标行为、Flex 轴向等关键逻辑。
整页 RTL 必须从 <html> 开始设 dir
只给 <body> 或某个 <div> 加 dir="rtl"，会导致：
– <input> 和 <textarea> 光标仍从左开始，输入时方向突变
– Tab 键焦点流保持 LTR 顺序，不符合 RTL 用户直觉
– Flex 容器的 flex-direction: row 不自动翻转主轴起点
– 滚动条可能仍在右侧（取决于系统支持）
– 第三方组件（如 Bootstrap 表单、React UI 库）样式错位，因为它们依赖 <html> 的继承方向做方位类名映射（如 ms-2 → me-2）
正确做法：
– 初始 HTML 中直接写 <html dir="rtl">
– SSR 渲染时确保服务端也输出该属性，避免 hydration 不一致
– 动态切换时用 document.documentElement.dir = "rtl"，而非仅操作 body 或某节点
dir="auto" 在多数生产场景下不可靠
dir="auto" 的判断逻辑极脆弱，常见失效情形：
– 首字符是空格、换行或 ASCII 字母（如 " Hello"），直接 fallback 到 ltr，哪怕后面全是阿拉伯语
– 首字符是中文/日文/韩文（Unicode “弱方向性” 字符），同样 fallback 到 ltr
– JS 动态插入内容（如 el.innerHTML = text）后不会重新触发方向推断
– Safari 对带变音符号的阿拉伯字符识别不稳定
立即学习“前端免费学习笔记（深入）”；
适用范围非常窄：
– 仅限用户评论、昵称等低风险、非关键路径的内联文本
– 绝对不要用于导航栏文字、表单 label、按钮文案等核心 UI 文本
混合语言文本要用 <bdi> 隔离，别用 dir="auto" 或 <bdo>
当一段文本来自 API（如用户名、搜索词），方向不确定且可能混排（如 "أحمد123"），必须用：<bdi>{{username}}</bdi>
原因：
– <bdi> 是 HTML5 原生语义标签，触发独立 Bidi 隔离上下文，不污染父级方向
– <bdo dir="rtl"> 是强制覆盖，会把数字 “123” 显示为 “321”，仅适合调试
– span[dir="auto"] 无隔离能力，旧版 Safari 不识别，且无法处理括号重排
注意：
– <bdi> 不影响布局尺寸，可安全嵌套在 <p dir="rtl"> 内
– 若后端返回已带方向标记（如 RLM/U+200F），<bdi> 仍能兼容处理
动态切换方向时，别只改 DOM 属性就完事
执行 document.documentElement.dir = "rtl" 后，还需：
– 强制重排：读取一次 offsetHeight 或触发 getComputedStyle，否则部分浏览器（尤其旧版 Safari）可能延迟应用方向变更
– 同步更新 CSS 自定义属性（如 --text-dir: rtl），供逻辑属性（margin-inline-start）使用
– 重置焦点：调用 document.activeElement?.blur()，再手动 focus 当前活动控件，避免光标卡在错误位置
– 检查第三方库是否监听了 dir 变更；例如某些图标组件需手动调用 forceUpdate()
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi> —— 大多数 “RTL 布局错乱” 的根因，都出在以为设了 <html dir="rtl"> 就万事大吉，结果用户在 <textarea> 里粘贴阿拉伯文本时，光标停在左边，选中文本顺序反了。
