dir属性是语义标记而非视觉修饰，必须设在上触发完整rtl行为链，影响光标、tab流、flex轴向、滚动条位置及屏幕阅读器朗读；局部设置或仅用css direction无效。
dir 属性在 RTL 页面中的核心作用dir 不是视觉修饰工具，而是语义标记：它告诉浏览器当前元素内文本的**自然书写方向**。对阿拉伯语、希伯来语、波斯语等从右到左（RTL）书写的语言，dir="rtl" 触发浏览器调整行内盒布局、标点位置、光标行为、表单输入方向等底层排版逻辑。不设 dir 或设错，会导致文字顺序混乱、数字和嵌入的 LTR 片段（如英文单词、URL）显示异常，甚至影响屏幕阅读器朗读顺序。
如何正确设置 dir="rtl" —— 从根元素开始
- 必须在 dir="rtl"，这是最稳妥的起点：
- 若只在局部容器（如 <div dir="rtl">）设置，嵌套结构中容易因继承与重置逻辑出错，尤其当内部含 <code><input>、<textarea></textarea> 或富文本区域时
- 避免依赖 CSS 的 direction: rtl 替代 dir 属性：CSS 只影响渲染，不改变 DOM 语义和辅助技术行为；dir 才是 W3C 推荐的语义化方式
- 对混合内容（如阿拉伯文中夹英文人名），无需手动包裹每个 LTR 片段——浏览器会基于 Unicode 双向算法（Bidi Algorithm）自动处理，前提是 dir 设置准确
常见坑：dir 和 lang 搭配不当导致的渲染错乱
- 单独设 dir="rtl" 但 lang 仍为 en 或空值，可能让某些字体回退到不支持 RTL 连字的变体，或使 spellcheck 失效
- 正确做法是同步设置：（阿拉伯语）、（希伯来语）
- 若页面含多语言切换，dir 应随 lang 动态更新，不能仅靠 CSS 类控制方向
- 注意：部分旧版 Safari 对 lang 值识别较严，推荐使用标准 BCP 47 标签（如 ar-SA、fa-IR），避免自定义值
表单控件与 dir 的交互细节
- <input type="text"> 和 <textarea></textarea> 默认继承父级 dir，但用户首次聚焦时，光标可能出现在左侧（LTR 行为残留），需确保其父容器有明确 dir
- 密码输入框（type="password"）在 RTL 页面中仍应保持 dir="rtl"，否则遮掩字符对齐错位
- 提交按钮文字若为 RTL 语言，按钮内文字需自然右对齐，这由 dir="rtl" 自动触发，无需额外 text-align
- 重要：不要用 style="text-align: right" 模拟 RTL 效果——它只改对齐，不改字符顺序、连字、标点挤压等真实排版行为
dir="rtl"，这是最稳妥的起点：
- 若只在局部容器（如 <div dir="rtl">）设置，嵌套结构中容易因继承与重置逻辑出错，尤其当内部含 <code><input>、<textarea></textarea> 或富文本区域时
- 避免依赖 CSS 的 direction: rtl 替代 dir 属性：CSS 只影响渲染，不改变 DOM 语义和辅助技术行为；dir 才是 W3C 推荐的语义化方式
- 对混合内容（如阿拉伯文中夹英文人名），无需手动包裹每个 LTR 片段——浏览器会基于 Unicode 双向算法（Bidi Algorithm）自动处理，前提是 dir 设置准确
常见坑：dir 和 lang 搭配不当导致的渲染错乱
- 单独设 dir="rtl" 但 lang 仍为 en 或空值，可能让某些字体回退到不支持 RTL 连字的变体，或使 spellcheck 失效
- 正确做法是同步设置：（阿拉伯语）、（希伯来语）
- 若页面含多语言切换，dir 应随 lang 动态更新，不能仅靠 CSS 类控制方向
- 注意：部分旧版 Safari 对 lang 值识别较严，推荐使用标准 BCP 47 标签（如 ar-SA、fa-IR），避免自定义值
表单控件与 dir 的交互细节
- <input type="text"> 和 <textarea></textarea> 默认继承父级 dir，但用户首次聚焦时，光标可能出现在左侧（LTR 行为残留），需确保其父容器有明确 dir
- 密码输入框（type="password"）在 RTL 页面中仍应保持 dir="rtl"，否则遮掩字符对齐错位
- 提交按钮文字若为 RTL 语言，按钮内文字需自然右对齐，这由 dir="rtl" 自动触发，无需额外 text-align
- 重要：不要用 style="text-align: right" 模拟 RTL 效果——它只改对齐，不改字符顺序、连字、标点挤压等真实排版行为
<input type="text"> 和 <textarea></textarea> 默认继承父级 dir，但用户首次聚焦时，光标可能出现在左侧（LTR 行为残留），需确保其父容器有明确 dir
- 密码输入框（type="password"）在 RTL 页面中仍应保持 dir="rtl"，否则遮掩字符对齐错位
- 提交按钮文字若为 RTL 语言，按钮内文字需自然右对齐，这由 dir="rtl" 自动触发，无需额外 text-align
- 重要：不要用 style="text-align: right" 模拟 RTL 效果——它只改对齐，不改字符顺序、连字、标点挤压等真实排版行为
实际排版效果是否符合预期，关键不在 CSS 调整多少，而在于 dir 是否在语义层被正确理解并贯穿整个 DOM 树。漏掉一个嵌套的 <span></span> 或动态插入的节点没带 dir，就可能让整段文本的双向逻辑崩塌。
