dir属性是HTML5全局语义属性，用于声明文本逻辑书写方向（ltr/rtl），驱动Unicode双向算法，影响光标、标点、数字顺序、Tab焦点流及flex布局等，必须在<html>上设dir="rtl"才能确保整页RTL正确生效。
HTML5 中的 dir 属性是控制文本阅读方向的核心机制，对阿拉伯语、希伯来语等从右向左（RTL）书写的语言至关重要。它不仅影响文字排列，还联动调整标点、数字、内联元素顺序及表单控件布局，是实现真正 RTL 支持的基础，而非仅靠 CSS 的 text-align: right 或 direction: rtl。
正确设置 dir 属性的层级与范围
dir 是全局属性，可作用于任意 HTML 元素，但推荐按语义层级合理使用：
- 整个页面默认为 RTL：在
<html>标签上添加dir="rtl"，例如<html lang="ar" dir="rtl">；这会将根方向设为 RTL，并影响所有后代元素（除非被显式覆盖） - 局部内容切换方向：对嵌入的 LTR 片段（如阿拉伯语文本中的英文术语、URL、日期或数字），用
<span dir="ltr">example.com</span>显式包裹，避免双向算法（Bidi Algorithm）误排 - 避免在块级容器（如
<div>）上滥用dir而忽略语义——优先用<blockquote dir="ltr">或<p dir="rtl">等语义化标签
dir 属性与 Unicode 双向算法（UBA）协同工作
dir 不替代 UBA，而是为其提供强方向锚点。浏览器依据该属性启动 Unicode 标准的双向重排序逻辑：
- 当
dir="rtl"生效时，阿拉伯字母、希伯来字符等强 RTL 字符优先从右开始排列 - 数字和拉丁字母属于强 LTR 类别，会在 RTL 上下文中自动“嵌入”并保持自身顺序（如 “٢٠٢٤ Hello” 在 RTL 段落中显示为右起：“Hello ٢٠٢٤”，其中 “Hello” 左对齐于其嵌入上下文）
- 若未设
dir，仅依赖字符本身方向性，复杂混合文本（如带括号、连字符、引号的句子）易出现错位，例如引号开口方向反向、括号包裹错乱
配合 CSS direction 和 text-align 的实用原则
dir 属性应作为第一道方向控制，CSS 仅作补充：
立即学习“前端免费学习笔记（深入）”；
-
direction: rtl在 CSS 中效果与dir="rtl"相似，但不具备 HTML 层面的语义和 ARIA 兼容性，且无法被屏幕阅读器可靠识别为文档主方向 -
text-align: right仅控制行内对齐，不改变字符顺序或标点行为——在纯 RTL 页面中，text-align: right实际等效于 LTR 下的text-align: left，容易引起混淆，建议统一用text-align: start - 对齐应优先使用逻辑值：
text-align: start/end、margin-inline-start/end，确保在dir切换时自动适配
处理表单与交互组件的方向敏感性
输入框、按钮、下拉菜单等原生控件会响应 dir 自动翻转布局：
-
<input type="text" dir="rtl">使光标起始位置在右侧，输入时文字从右向左延伸，清除按钮（×）出现在左侧 -
<select dir="rtl">选项下拉箭头移至左侧，滚动条也默认置于左侧（取决于浏览器） - 自定义组件（如富文本编辑器、日期选择器）需监听
dir变化，动态调整图标位置、动画方向及键盘导航顺序（如 Tab 键顺序应与视觉流一致）
不复杂但容易忽略：dir 属性是 RTL 布局的语义基石，必须从 HTML 结构层出发，再辅以逻辑 CSS 和测试验证。仅靠样式模拟方向，终将在多语言混排、辅助技术支持或国际化扩展时暴露缺陷。
