dir属性不触发uba就等于没写：它是激活unicode双向算法（uba）的语义信号，缺失则阿拉伯语混排中括号翻转、数字倒序、光标错位；必须设于根元素或容器，不可被css direction替代。
dir属性不触发UBA就等于没写
HTML的dir属性不是“让文字右对齐”的CSS开关，它是告诉浏览器“这段内容的语言方向是什么”，从而激活Unicode双向算法（UBA）的语义信号。没它，UBA压根不运行——阿拉伯语里夹个英文URL，括号会翻转、数字会倒序、光标停错位置，全是因为dir缺失或设在了错误层级。
常见失效场景包括：
-
<div><p dir="rtl">مرحبا 123</p></div>：父div没dir，p的dir只影响自身文本流，但表单控件、焦点顺序、屏幕阅读器仍按文档默认方向走 -
<input value="مرحبا 123">没加dir：输入框内部完全无视外部dir，退格键从右边删起、粘贴后数字乱序 -
<bdo>مرحبا</bdo>漏写dir：等同于<span></span>，不触发任何重排
ltr/rtl值怎么被继承和覆盖
dir会自然继承，但继承的是“方向上下文”，不是“渲染效果”。比如<p>مرحبا</p>中，p自动获得RTL上下文，UBA据此决定“مرحبا”从右往左排、“Hello”保持左到右——但前提是p里没有显式dir="ltr"打断继承。
覆盖规则很简单：
- 子元素显式写
dir="ltr"，就切断继承，启用独立UBA上下文 -
<bdi></bdi>是隐式隔离，等价于dir="auto"但更可靠，不依赖首字符，只隔离不改变方向 -
<bdo dir="rtl"></bdo>是暴力覆盖，跳过UBA直接逐字符重排，DOM文本顺序和视觉顺序彻底脱钩
dir="auto"为什么多数时候不如手写ltr/rtl
dir="auto"靠首个强方向字符（如阿拉伯字母U+0627）判断方向，但现实数据几乎总踩坑：
- 用户名以数字开头：
"123أهلا"→ fallback为ltr，阿拉伯语被当LTR处理 - 中文昵称：
"张三"无强方向字符 → 同样fallback为ltr，不会识别为RTL - API返回空字符串或占位符时，
dir="auto"锁定初始方向后不再更新 - Safari 13及更早版本根本不支持
dir="auto"
真正该用它的场景极少：仅限用户生成内容中**结构已知、方向不可控的独立子串**，比如评论区昵称、文件名。其他一律手写dir="ltr"或dir="rtl"。
混合文本里括号、数字、斜杠为啥总错位
不是dir没生效，而是UBA在混合文本中需要明确边界。比如"file.txt"在阿拉伯语段落里，点号.可能被当成RTL上下文的一部分而左移；"(123)"里的括号会因方向切换反向显示。
解法不是套bdo，而是用<bdi></bdi>隔离：
<p dir="rtl">انقر على <bdi>https://example.com</bdi></p><span dir="rtl"><bdi>user@مثال.com</bdi></span>
<bdi></bdi>开启Bidi Isolation，让UBA把里面的内容当独立块处理，括号归位、斜杠方向正确、复制粘贴保持原始顺序——这才是混合排版的合规解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
