直接用dir属性+逻辑属性是最稳路径，因dir="rtl"仅是触发双向算法的开关，必须设在上并同步lang属性，且所有水平物理属性（如margin-left）须替换为逻辑属性（如margin-inline-start）才能真正镜像。
直接用 dir 属性 + 逻辑属性，别碰 margin-left 和 text-align: right —— 这是当前最稳、维护成本最低的路径。
为什么 dir="rtl" 单独写没用？
它只是“开关”，不是“驱动器”。浏览器只靠它触发双向算法（UBA）和逻辑属性映射，但以下两点缺一不可：
-
dir必须真实继承到目标元素：父级写了dir="rtl"，子元素若被div包裹又没设dir，就可能中断继承；检查用getComputedStyle(el).direction看是否为"rtl" - 必须配合逻辑属性：比如
margin-inline-start才会随dir动态映射为左或右；写死margin-right在 LTR 下就错位了 - 字体必须支持对应语言：iOS 上 San Francisco 渲染阿拉伯数字易出方块，维吾尔文得用
Noto Sans Uyghur，否则unicode-bidi: isolate也救不回字形
unicode-bidi: isolate 该用在哪儿？
它不是全局样式，而是“短文本隔离开关”，专治混合内容方向失控。适用场景明确：
- 用户昵称、API 返回的标题/摘要、评论气泡里任意语言混排（如 “张三
٢٠٢٤files”） - 含数字+西文+阿拉伯语的短字段，比如时间戳 “
2024-07-07٢٠٢٤” - 避免用在整页容器上——隔离粒度太粗，反而干扰段落级 UBA 计算
- 老版本 fallback 到
unicode-bidi: embed，但隔离性弱，邻近文本可能“渗入”影响结果
伪元素和绝对定位最容易翻车
常见错误现象：RTL 下箭头还在左边、消息气泡角标跑到内容外、下拉菜单箭头错位——根因全是用了物理偏移。
- 把
left: 0换成inset-inline-start: 0，right: 0换成inset-inline-end: 0 -
::before/::after的定位属性必须逻辑化，否则 content 方向变了，定位还钉在物理侧 -
float: left改用float: inline-start（Chrome/Firefox/Safari 15.4+ 都支持） - 图标类 SVG 注意
viewBox是否需镜像；background-position: 100% 50%在 RTL 下要改0% 50%，否则背景图跑偏
字体和长度差异必须提前卡住
“提交”2 字符，“Save and continue”18 字符，按钮宽度不能靠 width: 120px 硬控——不同语言字符 advance width 天然不同。
- 按钮/标签用
width: fit-content+white-space: nowrap，防折行破坏视觉节奏 - 优先选多语种均衡字体：如
Inter（拉丁强）、Noto Sans（覆盖中日阿维）、HarmonyOS Sans（中日韩西统一度量） - 避免混合声明
font-family: "Helvetica", "PingFang SC", sans-serif——fallback 到PingFang SC后拉丁词突然变胖，宽度跳变 - 测试文案长度至少三档：超短（
"Go"）、中长（"Submit"/"提交"）、超长（德语"Speichern und zum nächsten Schritt fortfahren"）
真正容易被忽略的是：逻辑属性生效强依赖 dir 和 lang 双属性同步。只设 dir="rtl" 不设 lang="ar"，Safari 里输入框光标乱跳、数字格式异常、text-align: start 对 <input> 失效——这不是 CSS 写错了，是浏览器排版上下文根本没建全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
