不能靠lang属性自动推导排版方向，因浏览器仅通过dir属性决定书写模式，lang仅影响字体、断行、引号等语言相关样式，与text-align或margin-left无关；必须用:dir()伪类配合逻辑属性（如margin-inline-start）实现方向适配。
直接用 [lang] 选择器加逻辑属性，别碰 font-language-override——它不生效，还埋兼容性雷。
为什么不能靠 lang 属性自动推导排版方向
常见错误是看到 lang="ar" 就默认加 dir="rtl"，结果阿拉伯语混排英文时布局翻车。浏览器只认 dir 属性决定书写模式，lang 仅用于字体、断行、引号等语言相关样式，和 text-align 或 margin-left 无关。
-
lang必须写在**包裹文本的元素上**，比如<p lang="ja">こんにちは</p>，不能只塞在里——子元素不会继承font-family行为，除非显式写font-family: inherit - 避免用
[lang^="zh"]这类模糊匹配，它会同时命中zh-Hans和zh-Hant，导致简体/繁体共用同一套字体栈，字形错乱 -
lang不触发重排，但影响断行（line-break: strict）、引号（quotes）和连字符（hyphens），这些才是它该管的活
用 [lang] 调整间距的正确姿势
真正该动的是逻辑边距：用 margin-inline-start 替代 margin-left，再配合 :dir(rtl) 微调。伪类 :dir() 才是方向判断主力，[lang] 只负责字体和语言级微调。
- 按钮内图标位置错乱？别写
margin-left: 8px，改用margin-inline-end: 8px，它在 RTL 下自动变成右偏移 - 消息气泡箭头偏移？伪元素定位必须用
inset-inline-start/inset-inline-end，物理值left/right在 RTL 下直接反向失效 -
:dir(rtl)兼容性已够用（Safari 15.4+、Firefox 96+），适合做箭头翻转、对齐切换等精细控制；[lang="he"]这类则专注 Hebrew 字体加载和引号样式
哪些间距场景必须搭配 dir + lang 双保险
单靠 [lang] 无法解决方向切换，但某些混合排版必须两者并用：比如中日韩文字混排的富文本编辑器，或阿拉伯语界面里嵌入英文技术术语的文档页。
- 富文本中
<span lang="en">API</span>需保持 LTR 断行，但整体容器是dir="rtl"，此时[lang="en"]应设unicode-bidi: embed+direction: ltr - 表格表头含多语言列名时，
[lang="ja"] th设text-align: center，而:dir(rtl) th设text-align: right，避免日文居中、阿拉伯文也居中导致视觉失衡 - 不要在
[lang]规则里写direction: rtl——这会覆盖真实dir属性，造成嵌套方向混乱
最易被忽略的是：伪元素定位和 flex 子项收缩行为在 RTL 下完全依赖逻辑属性，[lang] 本身不改变盒模型流向。写错一个 left，整个气泡组件在阿拉伯语下就偏到屏幕外。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
