dir属性是唯一语义化手段，必须使用：它参与Unicode双向算法，决定光标、选区、数字分组、括号逻辑及屏幕阅读器解析；direction仅控制视觉对齐，不改变文本逻辑流，对表单输入、表格列序、Flex逻辑流等完全无效。
dir 属性是设置文字方向的唯一语义化手段，必须用它，不能只靠 CSS 的 direction。
为什么必须用 dir 而不是只写 direction: rtl
dir 参与 Unicode 双向算法（Bidi Algorithm），直接影响光标位置、选中文本顺序、数字分组、括号包裹逻辑和屏幕阅读器解析；direction 仅控制视觉对齐，不改文本逻辑流。常见错误包括：input 光标仍在左侧、复制粘贴后 “123” 变成 “321”、英文 URL 在阿拉伯语段中被错误折行。
以下情况 direction 完全无效：
-
input或textarea内用户输入行为 - 表格列顺序（
dir="rtl"会让<td>从右往左排列） - Flex 项目默认顺序（
flex-direction: row配合dir="rtl"才真正翻转逻辑流） - 搜索引擎和读屏软件识别语义方向
dir 应该加在哪些层级
优先级从高到低：根元素 → 局部容器 → 内联隔离。不建议跳过根元素直接局部设 dir。
立即学习“前端免费学习笔记（深入）”；
- 全局基线：在
<html dir="rtl">上声明，整页继承，是 Bidi 算法启动前提 - 局部切换：对多语言混排块显式设
<div dir="ltr">English quote</div>，避免污染父方向 - 不可信内容隔离：API 返回的用户名、搜索词等动态文本，用
<bdi>{{username}}</bdi>，而非dir="auto"
注意：dir="auto" 不可靠——首字符是数字、ASCII 字母、空格或中文时，一律 fallback 到 ltr；JS 动态插入后也不重算。
dir 和 direction 如何协同
二者不是互斥，而是分工明确：dir 定语义基线，direction 做视觉微调。例如：
- RTL 页面中某段英文摘要需保持 LTR 逻辑 + 右对齐视觉效果：用
<div dir="ltr" style="text-align: end;"> - 避免
direction: rtl; text-align: right—— 这会让“right”变成物理右，而非逻辑 end，在 RTL 环境下反而错位 - 不要给
number输入框设dir="rtl"，数字输入控件不支持 RTL 逻辑，会引发光标异常
所有涉及 margin-left、float 等物理属性的地方，应改用逻辑属性如 margin-inline-start，否则方向切换后布局崩塌。
表格和表单里特别容易踩的坑
表格单元格内含 input 时，dir 不会自动继承到输入框内部——必须单独加：<td dir="rtl"><input dir="rtl"></td>。
表格本身的方向影响列顺序，但不影响单元格内文本换行逻辑；若单元格内有混合文本（如阿拉伯语+英文 URL），仅设 dir="rtl" 不够，需配合 <bdi> 包裹 URL 部分。
表单提交时，若需向后端传递方向信息，可配合 dirname 属性：<input name="q" dirname="q.dir">，服务器能收到 q.dir=rtl。
真正难的从来不是加不加 dir，而是判断哪一层该继承、哪一层该隔离、哪一层该显式覆盖——多数方向 bug 都出在“以为加了 dir="rtl" 就结束了”。
