dir属性是HTML语义级方向控制，触发Unicode双向算法，影响光标、表单交互及文本流；direction仅为CSS视觉覆盖，不改变DOM顺序或键盘导航。
dir 属性和 direction CSS 属性不是可选的“美化开关”，而是多语言网页的底层排版基础设施。不显式设置，阿拉伯语、希伯来语或混合中阿文本就会错位、标点跑偏、表单光标跳转异常——这不是样式问题，是渲染逻辑失效。
什么时候必须用 dir 而不能只靠 direction
浏览器对 direction 的继承行为不可靠，尤其在表单、表格、内联元素嵌套时。比如一个 <input> 在 direction: rtl 的父容器里，输入光标仍可能从左开始；但加上 dir="rtl"，浏览器会重置整个文本流引擎，包括光标位置、数字分组（如 ١٢٣）、连字符断行规则。
-
dir是 HTML 层级的语义声明，影响布局计算、焦点顺序、辅助技术播报 -
direction是 CSS 层级的视觉覆盖，仅控制文本排列，不改变 DOM 顺序或键盘导航流 - 动态切换语言时，
document.documentElement.dir = "rtl"比批量改 class 更可靠，避免遗漏子元素
dir="auto" 的真实适用场景和陷阱
dir="auto" 不是“让浏览器猜”，而是按 Unicode 双向算法（UBA）扫描第一个强方向性字符（如阿拉伯字母 U+0600–U+06FF 或希伯来字母 U+0590–U+05FF）来决定方向。它适合用户自由输入的场景，比如评论框、搜索框。
- 纯数字或拉丁字母开头的内容会被判为
ltr，即使页面整体是 RTL —— 这是正确行为，不是 bug - 中文、日文、韩文等无强方向性字符的语言，
dir="auto"会退回到父元素的dir值，不会自动识别为 LTR - 不要在
<html>或<body>上用dir="auto"，会导致整个文档方向不稳定
混合方向文本中 unicode-bidi 怎么选值
当一段文字里同时出现阿拉伯语和英文（如 “API docs بالعربية”），仅靠 direction 无法保证英文单词内部不被 RTL 规则拆散。unicode-bidi 才是控制双向算法嵌套层级的关键。
立即学习“前端免费学习笔记（深入）”；
-
unicode-bidi: normal：默认值，完全依赖 UBA，适合大多数情况 -
unicode-bidi: embed：为该元素创建新的双向隔离上下文，推荐用于包裹外文短语，例如<span dir="ltr" style="unicode-bidi: embed">React</span> -
unicode-bidi: bidi-override：强制按direction排列所有字符，会破坏标点位置（如句号跑到行首），仅在调试或极特殊排版时使用
表单 placeholder 和输入内容方向不一致怎么办
placeholder 默认继承父元素 direction，但输入内容方向由 dir 决定。如果两者冲突（比如 RTL 页面里 placeholder 显示为 LTR），必须分开控制：
- 用
dir控制输入内容流向：<input dir="rtl"> - 用
::placeholder伪类单独设置 placeholder 方向：input::placeholder { direction: rtl; text-align: right; } - 注意 Safari 对
::placeholder的direction支持较晚（iOS 16.4+），旧版本需用-webkit-text-fill-color配合text-align补救
真正难的不是写对 dir="rtl"，而是判断哪些元素该继承、哪些该隔离、哪些该 override —— 这取决于你是否清楚当前文本在 Unicode 双向算法中的嵌套层级。没测过阿拉伯语键盘输入、没看过 VoiceOver 如何播报混合文本的页面，方向适配永远只是“看起来差不多”。
