dir="auto"不能用于<html>或<body>，因它仅依赖首字符强方向性判定且不重算，空格/数字/ASCII字母/中日韩文开头均fallback至ltr，导致整页方向错位、交互失准；仅适用于低风险内联展示场景，混合文本须用<bdi>隔离。
dir="auto 不适合用于多语种混合文档的全局方向适配，它只在极窄场景下可用，且极易误判。
为什么 dir="auto" 不能用在 <html> 或 <body> 上
浏览器对 dir="auto" 的判定仅依赖文本中第一个「强方向字符」（如阿拉伯字母 U+0600–U+06FF、希伯来字母 U+0590–U+05FF），不扫描全文，也不重算。一旦 DOM 渲染完成，方向就锁定，后续 JS 插入内容不会触发重新判断。
- 页面初始 HTML 是空的或以空格/数字/ASCII 字母开头 →
dir="auto"立即 fallback 到ltr，哪怕后面全是阿拉伯语 - 中文、日文、韩文开头 → 无强方向性，同样 fallback 到父级方向（通常是
ltr），不会自动识别为 RTL - SSR 渲染时若服务端返回空内容，hydration 后方向已定，客户端再填数据也无效
- 整页方向错位会直接导致 Tab 键焦点流、Flex 主轴、表单图标位置、滚动条位置全部失准
dir="auto" 唯一能用对的地方：内联、低风险、纯展示文本
它只适合用户生成、非关键路径、且首字符大概率是强方向字符的场景，比如评论区某条评论、搜索框输入值、用户名显示等。
- 必须包裹在明确的容器里，例如
<p dir="rtl"><span dir="auto">{{comment}}</span></p>，不能脱离上下文单独存在 - 若 API 返回的是
"أحمد123"，dir="auto"能正确识别；但返回"123 أحمد"或"张伟"就失效 - 旧版 Safari 和部分 Android WebView 对
dir="auto"支持不一致，动态插入后可能完全不生效
混合语言文本必须用 <bdi> 隔离，不是 dir="auto"
方向不确定的动态内容（如用户名、文件路径、搜索词）放进 RTL 页面时，真正要防的是「被父容器拖偏」，而不是「猜方向」。<bdi> 触发 Unicode BIDI Isolation，让双向算法只作用于标签内部，不污染外部布局。
立即学习“前端免费学习笔记（深入）”；
- 错误：
<span dir="auto">مجلد/file.txt</span>→ 点号.可能被当作 RTL 上下文的一部分，换行或对齐异常 - 正确：
<bdi>مجلد/file.txt</bdi>→ 自动跳过前导弱字符，找到首个强方向字符并隔离处理 -
<bdi>可安全嵌套在<p dir="rtl">内，不影响尺寸，也不强制翻转数字顺序 - 不要用
<bdo dir="rtl">—— 它会把"123"显示成"321"，仅适合调试
整页 RTL 必须从 <html dir="rtl"> 开始
所有关键 UI（导航、表单 label、按钮文案）的方向都不能靠「猜」，必须显式声明。这是唯一能让表单焦点流、Flex 主轴、伪元素行为、滚动条位置等底层逻辑正确翻转的方式。
- 服务端渲染必须输出
<html dir="rtl">，避免 hydration 不一致 - 前端动态切换要用
document.documentElement.dir = "rtl"，不能只改<body> - 切换后需强制重排（如读取
offsetHeight），否则旧版 Safari 可能延迟应用 - CSS 的
direction: rtl无法替代dir属性 —— 它不触发表单控件图标翻转、不改变text-align: start/end含义、不翻转 Flex 主轴起点
真正容易被忽略的点是：方向适配不是「让文本看起来对」，而是「让交互行为符合 RTL 用户直觉」。Tab 键顺序、光标移动、滚动条位置、甚至第三方 UI 库的方位类名（如 Bootstrap 的 ms-2 → me-2）都依赖 <html> 的 dir 继承。靠 dir="auto" 偷懒，最后修的不是样式，是整个交互链路。
