dir属性仅翻转行内文本视觉顺序而不改变块级布局流，需配合CSS的direction和unicode-bidi实现可靠双向文本支持，且影响可访问性与:dir()伪类匹配。
dir属性直接控制行内文本方向，但不改变块级布局流
设置 dir="rtl" 或 dir="ltr" 仅翻转文本的视觉排列顺序（如字母、数字、标点的左右位置），不影响容器尺寸、浮动、Flex/Grid 轴向或 margin/padding 的逻辑方向。比如 <div dir="rtl">Hello عالم</div> 中 “Hello” 会右对齐、“عالم” 从右往左写，但该 <div> 本身仍按普通文档流从上到下、从左到右占据空间。
与CSS的direction和unicode-bidi配合才能完整支持双向文本
纯靠 dir 属性处理混合语言（如阿拉伯语中嵌入英文URL）时，常出现词序错乱或括号方向反向。必须搭配 CSS 才可靠：
-
direction: rtl控制块内默认文本流向（等价于dir="rtl"） -
unicode-bidi: embed强制创建独立双向隔离上下文，避免相邻文本“串扰” - 对内联元素（如
<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 设置要谨慎，避免覆盖子组件预期方向
在 <html dir="rtl"> 上设全局方向看似省事，但极易破坏第三方 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。
