dir属性仅翻转行内文本视觉顺序而不改变块级布局流，需配合css的direction和unicode-bidi实现可靠双向文本支持，且影响可访问性与:dir()伪类匹配。

dir属性直接控制行内文本方向，但不改变块级布局流

设置 dir="rtl" 或 dir="ltr" 仅翻转文本的视觉排列顺序（如字母、数字、标点的左右位置），不影响容器尺寸、浮动、Flex/Grid 轴向或 margin/padding 的逻辑方向。比如 <div dir="rtl">Hello عالم</div> 中 “Hello” 会右对齐、“عالم” 从右往左写，但该 <div> 本身仍按普通文档流从上到下、从左到右占据空间。 <h3>与CSS的direction和unicode-bidi配合才能完整支持双向文本</h3> <p>纯靠 <code>dir 属性处理混合语言（如阿拉伯语中嵌入英文URL）时，常出现词序错乱或括号方向反向。必须搭配 CSS 才可靠：

• direction: rtl 控制块内默认文本流向（等价于 dir="rtl"）
• unicode-bidi: embed 强制创建独立双向隔离上下文，避免相邻文本“串扰”
• 对内联元素（如 <span></span>）单独设 dir="ltr" 是最简方案，比写 CSS 更直接

例如：<p dir="rtl">النص بالعربية <span dir="ltr">https://example.com</span></p> —— 这样 URL 始终保持左到右阅读顺序，不会被 RTL 环境扭曲。

dir属性不触发重排，但影响 :dir() 伪类和可访问性解析

dir 是 HTML 属性，浏览器不会因它触发 layout 重排，性能开销极小；但它直接影响两个关键层面：

• 屏幕阅读器依据 dir 判断朗读顺序，错误设置会导致阿拉伯语用户听到颠倒的句子
• CSS :dir(rtl) 和 :dir(ltr) 伪类可精准匹配，比查 [dir="rtl"] 更健壮（自动继承、忽略空值）
• 注意：Safari 直到 v17.4 才完全支持 :dir()，旧版需回退用属性选择器

全局 dir 设置要谨慎，避免覆盖子组件预期方向

在 上设全局方向看似省事，但极易破坏第三方 UI 库（如 React 组件、Bootstrap 表单控件）的样式逻辑 —— 它们通常假设 ltr 为基线，用 margin-left 实现图标间距，dir="rtl" 会让所有 left/right 反转，导致图标跑到文字右边甚至溢出。

更稳妥的做法：

• 只在真正需要 RTL 的区域加 dir="rtl"（如多语言切换后的内容区）
• 用 CSS 自定义属性（如 --text-dir: rtl）配合 text-align: var(--text-dir) 控制对齐，保留布局结构不变
• 若必须全局切换，同步注入 RTL 专用样式表，重置所有方位相关属性（padding-left → padding-right 等）

真正难的不是加 dir，而是判断哪一层该加、哪一层该隔离、哪一层该用 CSS 替代 —— 多数 bug 都出在“以为加了 dir 就万事大吉”，结果双向文本卡在中间不动，或者滚动条突然出现在左边却没配好 overflow-x。