dir属性变更本身不触发重排或重绘，页面未翻转的根本原因是CSS仍使用物理属性（如margin-left），而只有逻辑属性（如margin-inline-start）或:dir(rtl)伪类才能响应dir变化。
dir 属性变更本身不触发重排（reflow），也不强制重绘（repaint）——它只是语义标记，浏览器不会因此重建渲染树或重新计算布局。
为什么 document.documentElement.dir = "rtl" 后页面没翻转
根本原因不是 DOM 没更新，而是 CSS 仍用物理属性（margin-left、float: right、text-align: right）写死方向。这些属性完全不感知 dir，也不会随其值变化而重新计算。
-
dir变更后，只有依赖逻辑方向的 CSS 才会响应：比如margin-inline-start、text-align: start、flex-direction: row（在dir="rtl"下自动起点右移） - 旧式写法如
padding-right: 12px在 RTL 下依然推右边，导致“按钮被挤出视口”这类典型问题 - React/Vue 组件中仅 setState 或更新
dir属性，若样式未绑定:dir(rtl)或 class 切换，DOM 节点虽已带新dir，但样式引擎根本不重算
:dir(rtl) 伪类是目前最轻量的重排触发器
:dir(rtl) 是唯一由 dir 值驱动、且能主动触发样式重计算的原生机制。它不是“锦上添花”，而是让方向变更真正落地的关键链路。
- Chrome 115+、Firefox 119+ 支持，Safari 尚未支持（需降级为 class 切换）
- 写法必须是
button:dir(rtl) { margin-inline-start: 8px; }，不能写成button[dir="rtl"]—— 后者只是属性选择器，不触发方向感知重算 - 它比 JS 强制
getComputedStyle(el).marginInlineStart更可靠：后者只对单个元素生效，且可能引发意外回流
单页应用中避免手动 force reflow 的三个实操点
强行调用 offsetHeight 或 getComputedStyle 触发重排，既低效又不可控。应把“方向响应”前置到样式层。
立即学习“前端免费学习笔记（深入）”；
- 全局禁用物理方位声明：CI 流程中加正则扫描，拦截
margin-(left|right)、padding-(left|right)、float: (left|right) -
<input>和<textarea>必须显式带dir属性，不能只靠父容器继承——Chrome/Firefox 对表单控件的方向继承是残缺的 - 动态插入的用户内容（如 API 返回的昵称、评论）一律用
<bdi>包裹，而非dir="auto"：dir="auto"在数字/ASCII 开头时必然 fallback 到ltr，而<bdi>创建独立 bidi 上下文，稳定隔离方向污染
真正难的不是改 dir，而是让整条链路——从 HTML 属性、CSS 逻辑化、表单控件显式声明，到用户生成内容的隔离——全部对齐 Unicode 双向算法（UBA）的预期。漏掉任一环，都会表现为“看起来改了，但光标还是错的、按钮还是歪的、数字还是乱码”。
