整页文字方向应通过设置，而非仅用CSS的direction；动态不确定方向的文本须用自动隔离，避免BIDI污染；JS切换方向需读取document.documentElement.dir并强制重排。
用 dir 属性控制整页文字方向
HTML 文档默认从左到右（LTR），但阿拉伯语、希伯来语等语言需要从右到左（RTL）。直接在 标签上加 dir="rtl" 就能翻转整个页面的布局流向——包括文本对齐、表单控件顺序、甚至 Flex/Grid 的主轴方向。
常见错误是只给某个 <p></p> 或 <div> 加 <code>dir，结果导航栏还是左对齐、输入框光标跳错位置。整页 RTL 必须从根元素开始。
-
dir="ltr"和dir="rtl"是唯二合法值，不支持"auto"以外的其他字符串（auto有兼容性风险，慎用） - 加在
上，比 CSS 的direction: rtl更底层，能影响伪元素、表单重置行为等 CSS 控制不到的细节 - 若页面含双语混排（比如阿拉伯语正文里嵌英文术语），浏览器会自动按 Unicode 双向算法（BIDI）处理，无需手动包裹
<bdi></bdi>——除非你发现某段英文被强制 RTL 换行
内联文本方向用 bdi 而不是 span + dir
当一段动态插入的文本方向不确定（比如用户评论含阿拉伯语或波斯语），用 <bdi></bdi> 最安全。它会自动检测首字符 Unicode 类别，决定该段文本的隔离方向，避免污染周围内容的 BIDI 环境。
错误做法：用 <span dir="auto"></span> ——dir="auto" 在部分旧版 Safari 和 Android WebView 中不触发方向检测；更糟的是用 <span style="direction: rtl"></span>，这会强行覆盖父级方向，导致数字显示错乱（如 “123” 变成 “321”）。
立即学习“前端免费学习笔记（深入）”；
- 后端返回的昵称、标题等不可信内容，一律套
<bdi>{{username}}</bdi> -
<bdi></bdi>不影响盒模型，可放心替代<span></span>，无需额外样式重置 - 若需兼容 IE（已淘汰），只能退化为
<span dir="auto"></span>，但得接受部分边缘 case 失效
dir 属性和 CSS direction / text-align 的区别
dir 是 HTML 层语义属性，决定文档流、表单 Tab 键顺序、剪贴板粘贴行为；而 direction 是 CSS 布局属性，只管文本渲染和盒排列，不改变逻辑顺序。
典型坑：只写 style="direction: rtl; text-align: right"，结果按 Tab 键时焦点仍从左到右跳，或者复制整段文字到记事本里顺序反了。这是因为浏览器认为“逻辑顺序”仍是 LTR。
- 表单控件（
<input>,<button></button>）的dir值会继承自最近的带dir的祖先，不能靠 CSS 覆盖 -
text-align: right在 LTR 页面里只是右对齐，不会翻转冒号、括号等标点位置；只有dir="rtl"才触发完整双向重排 - Flex 容器设
dir="rtl"后，flex-direction: row的起始边自动变成右边，无需改 CSS
JavaScript 读取和切换页面方向要小心 DOM 同步
通过 JS 修改 document.documentElement.dir 会立即触发布局重排，但某些依赖方向的 API（如 getBoundingClientRect()）可能返回过渡态坐标。更麻烦的是，dir 变更后，document.dir 属性值不会立刻更新——它只反映初始 HTML 中的值，不响应运行时修改。
- 判断当前真实方向，用
document.documentElement.dir，别用document.dir - 切换方向后，若要重新计算某元素宽度，先
offsetHeight强制重排，再取值 - 监听方向变化？没有原生事件。只能用
MutationObserver监听documentElement的dir属性变更
String.prototype.localeCompare）的行为里。一个没设对的 dir，可能导致屏幕阅读器朗读顺序错乱，或者 RTL 用户点不到右上角的关闭按钮。
