动态修改 dir 属性必须作用于 document.documentElement 才能正确触发全局 RTL 上下文，否则光标、Tab 流、剪贴板及 UBA 行为异常；局部 dir 仅影响文本流，控件需单独设置；混排内容须用 <bdi> 隔离，禁用 dir="auto" 和 style="direction"。
dir 属性不是样式开关，改它不触发重排，但会立刻影响光标位置、Tab 流、剪贴板行为和 Unicode 双向算法（UBA）——所以动态改必须改到根节点，否则表单控件、Flex 布局、焦点顺序全错乱。
document.documentElement.dir 是唯一可靠的动态切换入口
浏览器只在 document.documentElement（即 <html> 元素）上识别全局方向变更。改 body 或任意 <div> 都不会触发完整 RTL 上下文：
- ✅ 正确写法：
document.documentElement.dir = "rtl"或document.documentElement.setAttribute("dir", "rtl") - ❌ 错误写法：
document.body.dir = "rtl"——<input>光标仍从左入，Tab键还是左→右 - ⚠️ 必须同步改
lang：document.documentElement.lang = "ar"，否则阿拉伯数字连字、屏幕阅读器语音规则失效 - ⚠️ SSR 渲染页需服务端初始输出正确
<html dir="rtl" lang="ar">，否则 hydration 后方向不一致，React/Vue 组件可能闪退或布局错位
局部 <p> 的 dir 不能靠 JS 动态继承
给某个 <p> 元素设 dir="rtl" 是静态行为；JS 动态改它，仅影响该元素内文本流和 UBA，但不改变其子控件逻辑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅
<p dir="rtl">نص عربي</p>中阿拉伯文字正常右对齐、括号方向正确 - ❌
<p id="myP"><input type="text"></p>→ JS 改myP.dir = "rtl"，<input>光标仍在左边，输入阿拉伯语时首字符跳到右侧 - ✅ 正确做法：单独设
input.dir = "rtl"，且必须在 DOM 挂载后执行（如DOMContentLoaded或 ReactuseEffect） - ⚠️ 不要用
style="direction: rtl"替代 —— 它不参与 UBA，复制整段文字到记事本仍是乱序
<p> 里混英文/数字时，dir="rtl" 不够用
纯 <p dir="rtl"> 无法解决 “API v2.4.1” 显示为 “1.4.2 v API” 这类问题，因为 UBA 需要显式隔离 LTR 片段：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
<p dir="rtl">النص مع <bdi>API v2.4.1</bdi></p>——<bdi>触发独立双向上下文，数字顺序不变，括号方向正确 - ❌ 避免：
<p dir="rtl">النص مع <span style="direction: ltr">API v2.4.1</span></p>—— 复制出来仍是乱序，屏幕阅读器朗读错误 - ❌ 别用
dir="auto"：<p dir="auto">أحمد123</p>在 Safari 和旧 Android WebView 中大概率 fallback 到ltr，首字符是数字或空格就失效 - ⚠️
<bdo dir="rtl">是强制覆盖，会把 “123” 显示成 “321”，仅用于调试，生产环境禁用
真正难的不是改 dir，而是判断哪一层该由根节点控制、哪一层该用 <bdi> 隔离、哪一层必须手动设 dir —— 比如一个 <p> 里嵌了用户昵称（来自 API），哪怕整页已设 <html dir="rtl">，那个昵称仍可能含混排字符，漏掉 <bdi> 就会导致整段文字方向被拖偏。
