不能靠lang属性自动翻转布局方向，因浏览器仅依据dir属性决定书写模式，lang只影响字体、断行、引号等语言级样式，与text-align、margin等布局属性无关；必须用:dir()伪类配合margin-inline-start等逻辑属性实现方向适配。
移动端多语言排版不能靠 lang 属性自动翻转布局方向，必须用 :dir() 伪类 + 逻辑属性（如 margin-inline-start）组合控制；lang 只影响字体、断行、引号等语言级样式，和对齐、边距、书写模式无关。
为什么 [lang="ar"] 加 text-align: right 会失效
浏览器只根据 dir 属性决定书写模式（LTR/RTL），lang 不触发重排也不改变文本流。写 [lang="ar"] { text-align: right } 看似合理，但实际：
- 若父容器没设
dir="rtl"，阿拉伯文字仍按 LTR 流渲染，标点、数字位置错乱 -
text-align: right只是“右对齐”，不是“从右向左排”，英文单词仍从左往右读 - 按钮图标、气泡箭头等依赖物理定位的元素，在 RTL 下直接偏移出界
用 :dir(rtl) 替代 [lang] 控制方向相关样式
:dir() 是唯一能准确反映当前元素书写方向的 CSS 机制，它读取的是 dir 属性值，而非语言标签。实操建议：
- 所有方向敏感样式（
margin-inline-start、inset-inline-end、flex-direction）必须基于:dir(rtl)或:dir(ltr)编写 - 避免在
[lang="he"]规则里写direction: rtl——这会覆盖真实dir，导致嵌套内容方向混乱 - Safari 15.4+、Firefox 96+、Chrome 100+ 均已支持，兼容性足够落地
- 示例：消息气泡箭头定位统一用
inset-inline-start: -8px，无需为阿拉伯语单独写left: -8px
混排场景必须加 unicode-bidi: isolate
当阿拉伯语段落里嵌入英文缩写或数字（如 “files ٢٠٢٤” 渲染成 “٢٠٢٤ files”），单纯设 dir="rtl" 不够，因为浏览器对 ASCII 字符默认按强 LTR 处理。此时需显式隔离上下文：
立即学习“前端免费学习笔记（深入）”；
- 对用户昵称、API 返回的动态字段，统一加
unicode-bidi: isolate; direction: rtl - 不推荐
unicode-bidi: embed，它隔离性弱，易受邻近文本干扰；bidi-override仅限调试 - 生效前提：父容器必须有
dir="rtl"，且字体支持对应语言字形（例如 iOS 上 San Francisco 对阿拉伯数字支持差，需 fallback 到 Noto Sans Arabic） - 别漏掉物理属性陷阱：
margin-left在 RTL 下仍往左推，必须改用margin-inline-start
最易被忽略的是：伪元素定位、flex 子项收缩行为、甚至 text-indent 在 RTL 下全部依赖逻辑属性；lang 本身不改变任何布局逻辑，只负责语言级微调——比如日文引号用 quotes: "「" "」" "『" "』"，而不是把按钮推到右边。
