必须在<html>元素上设置dir="rtl"才能触发完整RTL感知机制；否则光标、选区、滚动条、Tab流向均失效，且需配合lang="ar"确保字体连字、数字形式与语音规则正确。
必须在 <html> 元素上设置 dir="rtl" 才能触发浏览器完整的 RTL 感知机制；仅靠 CSS direction、局部 dir 或动态改 <body> 都无法验证真实排版行为——光标、选区、滚动条、Tab 流向都会失效。
用 <html dir="rtl"> 启动真实 RTL 渲染环境
浏览器只在根元素带 dir 属性时，才启用 Unicode 双向算法（UBA）并修正底层交互逻辑。局部设置（如 <div dir="rtl">）或仅加 style="direction: rtl" 会导致：
-
<input>和<textarea>光标仍从左端起始，输入阿拉伯语时退格键跳转错乱 - 双击选词方向反向（比如选中 “API v2.4.1” 实际高亮为 “1.4.2 v API”）
- 滚动条保留在右侧，
<select>下拉项未翻转方向 - Tab 键焦点流仍按 LTR 顺序，违反 RTL 用户直觉
测试前务必确保初始 HTML 是：
<html dir="rtl" lang="ar"> <head>...</head> <body>...</body> </html>
lang="ar" 不可省略：它影响字体连字、东阿拉伯数字（١٢٣）、屏幕阅读器语音规则。缺它，dir="rtl" 就只是“看起来像”，不是“真正可用”。
立即学习“前端免费学习笔记（深入）”；
混合文本中英文/数字乱序的验证与修复
纯 dir="rtl" 容器内，嵌入的拉丁片段（如 URL、版本号、品牌名）会因 UBA 未被正确隔离而显示错序。典型现象：
- “API v2.4.1” 渲染为 “1.4.2 v API”
- 括号方向翻转：“(v2.4.1)” 显示为 “)1.4.2v(”
- 复制粘贴后仍是乱序，无障碍工具朗读顺序错误
验证方法：在页面中插入含混合内容的段落，例如：
<p dir="rtl">التحديث الأخير على <bdi>https://example.com/v2.4.1</bdi></p>
注意必须用 <bdi>，而非 span[dir="ltr"] 或 style="direction: ltr"——后者不参与 UBA，仅改盒模型，复制结果仍乱。
检查 CSS 物理属性是否被误用
dir="rtl" 不会自动翻转 margin-left、float: left、left: 0 等物理属性。这些写死的值在 RTL 下会直接导致布局错位：
-
margin-left: 16px在 RTL 下仍往左推，视觉上变成右侧大片空白 -
float: left的导航菜单在 RTL 下仍靠左，破坏整体镜像感 -
text-align: right应改为，否则切换语言后文字溢出</li> </ul> <p>快速验证方式：打开开发者工具，搜索所有 <code>margin-
、padding-、left/right、float声明，确认是否已替换为逻辑等价物：-
margin-left→margin-inline-start（或降级写法：[dir="rtl"] .el { margin-right: 16px; }） -
float: left→float: inline-start -
text-align: right→text-align: end
动态切换方向时的 DOM 与渲染一致性验证
用 JavaScript 切换
dir后，不能只设属性就认为完成。旧版 Safari 和部分 Chromium 内核浏览器存在延迟应用问题：- 执行
document.documentElement.setAttribute("dir", "rtl")后，需同步设置lang，否则数字格式、字体连字不生效 - 必须强制重排：读取一次
offsetHeight或调用getComputedStyle(el).direction，否则部分样式（尤其是 Flex 主轴）可能卡在旧状态 - 第三方组件（如 React 表单库、Bootstrap 按钮组）若未监听
dir变化，其内部 class 名（如ms-2）不会自动更新，需手动触发重渲染或使用 CSS :dir() 伪类兜底
最简验证脚本：
function switchToRTL() { document.documentElement.setAttribute("dir", "rtl"); document.documentElement.setAttribute("lang", "ar"); // 强制重排 void document.documentElement.offsetHeight; }复杂点在于：很多 UI 组件依赖服务端渲染时的
dir状态做 class 映射，客户端 JS 切换后，若没同步更新组件状态，就会出现“DOM 是 RTL，但样式仍是 LTR”的撕裂现象。 -
