dir属性是HTML原生布尔属性，仅声明文本默认书写方向以触发Unicode双向算法，影响标点对齐、混合文本顺序及表单光标行为；CSS的direction仅控制行内对齐，不改变bidi上下文，且dir优先级高于direction。
dir 属性控制文本方向的底层作用
dir 是 HTML 元素的原生布尔属性，它不改变字体或排版样式，只告诉浏览器「这段内容的默认书写方向是什么」。浏览器据此调整标点对齐、连字符位置、数字与字母混合时的顺序（比如阿拉伯数字在希伯来文中靠右，但数字本身仍左到右显示），以及 textarea 和 input 中光标的初始位置。
什么时候必须用 dir="rtl" 或 dir="ltr"
纯 CSS 的 direction 和 unicode-bidi 无法覆盖表单控件内部行为，也不能影响某些内置 UI（如 select 下拉项、placeholder 渲染逻辑）。这时必须用 dir 属性：
- 阿拉伯语、希伯来语等 RTL 语言站点的根元素加
dir="rtl" - 英文页面中嵌入一段阿拉伯语段落，且该段落含标点或双向文本（如含英文人名），需单独加
dir="rtl"到p或span - 表单输入框要支持 RTL 输入（比如用户打阿拉伯语），
input或textarea必须显式设dir="rtl"，否则光标和退格行为会错乱
dir="auto" 的真实表现和坑
dir="auto" 看似智能，实际依赖首个强方向字符（strong directional character）判断，容易误判：
- 开头是数字、标点、ASCII 字母（如 "123 test"、"Hello!"），一律判为
ltr，哪怕后面全是阿拉伯文 - 空字符串、纯空格、或以 LRO/RLO 控制符开头时行为未定义，不同浏览器可能回退到父级
dir或文档默认值 - Vue/React 等框架中动态渲染内容，若首字符异步加载完成前已渲染，
dir="auto"可能锁定错误方向，后续不重算
线上项目慎用 dir="auto"，优先明确指定 dir="ltr" 或 dir="rtl"。
和 CSS direction 属性的关键区别
direction CSS 属性仅影响块内行盒（inline formatting context）的对齐和顺序，不改变元素本身的 bidi 算法上下文：
-
dir属性会触发浏览器重新运行 Unicode 双向算法（UBA），影响整个元素及其子元素的文本流解析 -
direction: rtl不会让input的 placeholder 右对齐，也不影响select选项弹出方向；dir="rtl"会 - 当
dir和direction冲突时，dir优先级更高（HTML 规范强制）
简单记：需要影响光标、选区、表单交互或嵌套双向文本逻辑时，绕不开 dir 属性本身——CSS 做不到的事，它得上。
