必须加在实际包裹文本内容的元素上，如、、、等；仅设或会导致表单光标错乱、tab流不翻转、flex轴向不变；和需单独设dir="rtl"，否则输入方向仍按ltr处理。
dir属性该加在哪个HTML标签上才生效
dir 属性必须加在**实际包裹文本内容的元素**上，而不是只加在 或 根节点。浏览器按继承规则向下传递方向，但只有含文本的元素（如 <p></p>、<div>、<code><span></span>、<h1></h1>）才会真正应用排版行为。
常见错误是只给容器设 dir="rtl"，但内部用 <span></span> 包裹文字时没继承——因为 <span></span> 默认不换行、无块级上下文，某些浏览器（尤其旧版 Safari）可能忽略继承的方向设置。
- 稳妥做法：直接在最内层文本容器加
dir="rtl"，例如<p dir="rtl">مرحبا</p> - 若需整页 RTL，建议同时设
和，避免表单控件、列表符号等错位 -
<input>和<textarea></textarea>需单独加dir="rtl"，否则光标和输入方向仍按 LTR 处理
dir="rtl" 和 CSS 的 direction: rtl 有什么区别
两者最终效果相似，但作用机制不同：dir 是 HTML 属性，影响**Unicode 双向算法（Bidi Algorithm）的基线方向判定**；而 direction: rtl 是 CSS 属性，只控制盒模型内的文本对齐和部分布局行为（如 text-align、margin-left/right 的映射），不参与 Bidi 重排序。
- 混合语言文本（如阿拉伯语中夹英文或数字）必须用
dir，否则数字“123”在 RTL 段落里可能被错误翻转成“321” - CSS 的
direction无法修正<bdi></bdi>或<textarea></textarea>的输入方向，这些依赖 HTML 层的dir - 当
dir和direction冲突时，dir优先级更高（HTML 规范强制）
遇到数字或英文单词顺序错乱怎么办
这是 RTL 场景下最典型的双向文本（BiDi）问题：阿拉伯语或希伯来语段落中嵌入的拉丁字母单词或阿拉伯数字，会因 Unicode Bidi 算法自动重排，导致“Test 123”显示为“123 tseT”。
- 用
<bdi></bdi>包裹独立短语，例如：<p dir="rtl">النص مع <bdi>Test 123</bdi></p> - 对已知方向的内联内容，显式加
dir="ltr"，例如：<span dir="ltr">APIv2</span> - 避免用
（右到左标记）硬编码，它不可见且难维护；优先用语义化 HTML 元素 - 测试时务必用真实 RTL 文本（非占位符），Chrome DevTools 的 Rendering 面板可开启 “Emulate RTL” 快速验证
表单元素和按钮文字方向异常的修复方法
原生表单控件（<button></button>、<select></select>、<input type="submit">）在 RTL 页面中常出现文字靠左、箭头图标错位等问题，根源是浏览器对控件内部子结构的方向处理不一致。
- 所有表单控件必须显式声明
dir="rtl"，不能只靠父容器继承 -
<button dir="rtl">إدخال</button>比<button><span dir="rtl">إدخال</span></button>更可靠 - 下拉框
<select></select>的选项（<option></option>）需单独设dir="rtl"，否则展开后列表仍为 LTR - 若使用 CSS 框架（如 Bootstrap），需检查其 RTL 支持版本，旧版可能忽略
dir而仅依赖 class 名（如text-right）
<textarea></textarea> 的方向继承失效和 <option></option> 标签的方向缺失——这两处出问题时，用户输入和选择体验会直接降级，且不易被自动化测试覆盖。
