必须在上设dir="rtl"才能确保整页rtl正确生效，否则光标、tab焦点流、flex主轴起点、滚动条位置等均会错乱；局部加dir="rtl"仅影响该元素内uba上下文，不改变表单控件行为与布局逻辑。
必须在 上设 dir="rtl"，否则整页 RTL 无法真正生效——表单光标、Tab 焦点流、Flex 主轴起点、滚动条位置全都会错乱。
为什么只给 <div> 加 <code>dir="rtl" 不够用
局部加 dir="rtl" 只影响该元素内文本的 Unicode 双向算法（UBA）上下文，但不会改变：
-
<input>和<textarea></textarea>的光标起始位置和退格行为 - Tab 键在表单控件间的移动顺序（仍按 LTR 逻辑跳转）
-
flex-direction: row的主轴起点（默认仍是 left，不是 right） - 滚动条位置（仅当根元素有
dir="rtl"时，Chrome/Firefox 才会把它挪到左侧）
常见现象：<div dir="rtl"><input type="text"></div> 中输入阿拉伯语，光标一开始卡在左边，第一次按键后才“跳”到右边——这就是没从根上声明方向导致的。
dir="auto" 在生产环境几乎不可靠
它依赖首个「强方向字符」判断方向，而这个“首字符”常常不是你预期的那个：
- 用户昵称是
"أحمد123"→ 没问题，识别为 RTL - 用户昵称是
"Ahmad"或"123 أحمد"→ 强字符是A或1，强制 fallback 到 LTR - 昵称是中文
"张伟"→ 无强方向性，同样 fallback 到 LTR - Vue/React 中数据异步到达，DOM 先渲染空字符串，
dir="auto"锁定 LTR 后不再重算
线上项目中，dir="auto" 应仅用于评论区、搜索关键词等低风险、纯展示型内联文本；所有关键 UI 区域（导航、表单标签、按钮组）必须显式写死 dir="ltr" 或 dir="rtl"。
混合语言文本必须用 <bdi></bdi> 隔离
API 返回的用户名、搜索词、动态标题等方向不确定的内容，不能直接插进 RTL 容器里：
- 错误写法：
<div dir="rtl">{{username}}</div>—— 若username是"John"，整个<div> 的 Bidi 上下文可能被带偏，括号反向、数字顺序错乱 <li>正确写法：<code><div dir="rtl"><bdi>{{username}}</bdi></div>——<bdi></bdi>自动创建独立双向隔离上下文，不污染父级 - 别用
<bdo dir="rtl"></bdo>替代：它会强制翻转所有字符顺序（"123"变成"321"），仅适合调试或极特殊覆盖
<bdi></bdi> 是 HTML5 原生语义标签，现代浏览器支持良好，且不触发重排，性能无负担。
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi></bdi> —— 多数 RTL bug 都出在“加了 dir 就以为完事了”，结果混合文本卡在中间不动，或者滚动条出现在左边却没配好 overflow-x。
