dir属性是html原生属性，用于声明文本逻辑书写方向（ltr/rtl），参与unicode双向算法，影响光标、标点、数字顺序、tab焦点流及flex布局等，不可被css的direction替代；必须在元素上设置dir="rtl"才能确保整页rtl正确生效。
dir 属性不是“让文字看起来右对齐”的样式开关，而是告诉浏览器「这段内容的逻辑书写方向是什么」——它直接参与 Unicode 双向算法（Bidi），影响光标位置、标点包裹、数字顺序、Tab 键焦点流、甚至 flex-direction 的起始边。只用 CSS 的 direction 无法替代它。
整页 RTL 必须从 html 元素开始设 dir="rtl"
常见错误是只给某个 <div> 或 <code><p></p> 加 dir="rtl"，结果导航栏仍左对齐、输入框光标跳错、表单按钮顺序没翻转。原因很简单：dir 的继承是从根往下生效的，只有 才能确保：
- 所有子元素（包括
<input>、<button></button>、<textarea></textarea>）默认按 RTL 逻辑排布 - Tab 键顺序从右到左，符合用户预期
- Flex 容器的
flex-direction: row自动将主轴起点设为右侧 - 滚动条出现在左侧（在支持双向的系统中）
别写 —— 才是真正控制文档根方向的合法位置。
dir="auto" 在哪些场景会失效
dir="auto" 看似省事，但实际触发条件极苛刻，容易导致方向判断失败：
- 首字符是 ASCII 字母、数字或空格（如 “Hello”, “123”, “ 你好”）→ 强制 fallback 到
ltr，哪怕后续全是阿拉伯字母 - 首字符是中文、日文、韩文等无方向性文字 → 同样 fallback 到
ltr，不会识别为 RTL - JS 动态插入内容（如
el.innerHTML = text）后，不会重新触发方向推断 - Safari 对某些组合字符（如带变音符号的阿拉伯字母）支持不稳定
结论：仅在纯用户评论、昵称等完全不可控且低风险的内联文本中谨慎使用；关键文案、表单标签、导航项必须显式指定 dir="ltr" 或 dir="rtl"。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
动态文本方向隔离该用 <bdi></bdi>，不是 <span dir="auto"></span>
当一段内容来自 API（比如用户名、搜索关键词），方向不确定且可能混排（如阿拉伯用户名里夹英文），必须用 <bdi></bdi> 包裹：
<bdi>{{username}}</bdi>
它会自动隔离该段文本的 Bidi 环境，避免污染父级方向。而以下写法是危险的：
-
<span dir="auto">{{username}}</span>—— 不触发隔离，可能把整个容器拖进错误方向 -
<span style="unicode-bidi: embed"></span>—— 语义模糊，旧版 Safari 不支持，且不处理标点重排 -
<bdo dir="rtl"></bdo>—— 强制覆盖，会把 “123” 显示成 “321”，仅用于调试或极特殊覆盖场景
<bdi></bdi> 是 HTML5 原生语义标签，所有现代浏览器支持良好，无需 polyfill。
JS 切换方向时要注意 DOM 同步和 hydration mismatch
用 JS 改 document.documentElement.dir 能立即生效，但有两点必须处理：
- 切换后需手动触发依赖方向的 UI 重排（比如某些第三方组件库的 RTL 模式需额外调用
forceUpdate()） - 在 React/Vue SSR 场景中，服务端初始渲染的
dir值必须与客户端首次 hydrate 时一致，否则抛出 hydration mismatch 错误 - 读取当前方向不要只看
document.documentElement.getAttribute('dir')，要兼容未设置时的默认行为（undefined视为"ltr"）
最易被忽略的是：CSS 的 direction 和伪类（如 ::placeholder）不会随 dir 属性自动更新，必须配合 class 或 JS 同步切换。
