html 的 dir 属性是全局属性，仅 ltr/rtl 可靠；整页 rtl 必须从 设置，否则光标、焦点、flex 等行为错位；混合文本应使用 隔离，避免 dir="auto" 和 ；dir 与 css direction/text-align 不可互换。
dir 属性不是标签，是 HTML 全局属性，值只能是 ltr、rtl 或 auto —— 其中只有 ltr 和 rtl 是生产环境可信赖的取值。
整页 RTL 必须从 dir="rtl"
只在 或某个 <div> 上加 <code>dir="rtl"，会导致表单光标仍从左入、Tab 焦点流不翻转、Flex 主轴起点不变、滚动条卡在右边等底层行为错位。浏览器只在根元素有 dir 时才触发完整 RTL 逻辑链。
- 服务端渲染（SSR）必须初始输出
，避免 hydration 不一致 - 客户端动态切换时，用
document.documentElement.dir = "rtl"，不能只改body或局部节点 - 第三方 UI 库（如 Bootstrap、MUI）多数依赖
的继承方向做类名映射（如ms-2→me-2），没设对根方向，样式直接失效
混合文本别靠 dir="auto"，用 <bdi></bdi> 隔离
dir="auto" 在真实场景里几乎不可用：首字符是空格、数字、中文、括号或变音符号时，Safari/Chrome 行为不一致；JS 动态插入后也不重新检测；API 返回的用户名或搜索词一旦混排（如 "أحمد123"），极易错判。
- 正确做法是包裹不确定方向的内联内容：
<bdi>{{username}}</bdi> -
<bdi></bdi>触发独立 Bidi 隔离上下文，不影响父级方向，且兼容所有现代浏览器 - 避免用
<bdo dir="rtl"></bdo>—— 它会把数字 “123” 强制显示为 “321”，仅适合调试
dir 和 CSS 的 direction / text-align 不是替代关系
dir 是 HTML 层语义属性，决定光标起始、Tab 流、剪贴板粘贴顺序、Flex 轴向起点等；direction: rtl 只影响盒内文本流和部分布局，无法改变表单焦点逻辑；text-align: right 更只是视觉对齐，不触发双向重排，括号、冒号方向全错。
- 写
style="direction: rtl; text-align: right"而不设dir，复制整段文字到记事本会乱序 - 对齐应统一用逻辑值：
text-align: start、margin-inline-start，随dir自动适配 -
:dir(rtl)伪类比[dir="rtl"]更可靠（自动继承、忽略空值），但 Safari ≤17.3 不支持，需降级
真正难的不是加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该用 <bdi></bdi> —— 大多数方向 bug 都出在“以为设了 dir="rtl" 就结束了”，结果输入框光标还在左边，或者阿拉伯语里的英文 URL 被拆成两行还反向换行。
