direction: rtl仅翻转逻辑方向相关属性，如margin/padding/border的-left/-right映射为inline-start/end、text-align用start/end替代left/right；width/height/border-radius等物理属性不变，background-position、transform等不响应direction，需用logical properties或:dir(rtl)精准控制。
direction: rtl 会翻转哪些布局属性
它只翻转逻辑方向相关的属性，不是整个页面“镜像截图”。margin-left 变成视觉上的右边距，text-align: start 对齐到右端，flex-direction: row 的主轴从左→右变成右→左——但 width、height、border-radius 这类物理尺寸或绝对定位值完全不变。
常见错误是以为加了 direction: rtl 就万事大吉，结果发现 padding-left 还在左边撑开空白，background-position: left top 依然锚定左上角，图标没跟着翻转。
-
margin/padding/border的-left/-right会被自动映射为start/end -
text-align: left/right失效，应改用start/end或依赖direction -
background-position、transform: translateX()、clip-path等不响应direction
用 logical properties 替代物理方向写法
硬写 margin-right: 16px 在 RTL 下会错位；换成 margin-inline-end: 16px 才真正“始终在末尾”。这是适配多语言排版最稳妥的写法，浏览器支持已很成熟（Chrome 87+、Firefox 89+、Safari 15.4+）。
实际替换时注意：不是所有物理属性都有直接 logical 对应，比如 border-top-left-radius 没有 border-start-start-radius（CSS 规范尚未定义），得靠 dir 切换 class 或 JS 检测。
立即学习“前端免费学习笔记（深入）”；
-
margin-left→margin-inline-start -
padding-right→padding-inline-end -
text-align: right→text-align: end -
float: left→float: inline-start（但更推荐用display: flex或inset-inline-start）
图标与自定义符号怎么跟着翻转
SVG 图标默认不随 direction 翻转；字体图标（如 Font Awesome）里的 fa-arrow-left 在 RTL 下仍指向左，语义就错了。关键不是“翻转”，而是“语义对齐”：返回按钮在 RTL 界面里应该指向右侧，因为用户心理模型是“往书写起点走”。
最轻量做法是给图标容器加 transform: scaleX(-1)，但仅适用于纯装饰性图标；若图标含文字或需要点击热区精准，得用 transform: rotateY(180deg) 或单独提供 RTL 版本 SVG。
- 避免全局
[dir="rtl"] svg { transform: scaleX(-1); }——会把箭头、勾选、数字都镜像，破坏可读性 - 用
content+:dir(rtl)伪类切换 Unicode 符号：content: "←"; :dir(rtl) & { content: "→"; } - Icon font 推荐用
font-feature-settings: "rtla"（需字体支持），比硬编码更可持续
JS 检测和动态 class 控制的边界情况
靠 document.dir 或 getComputedStyle(el).direction 判断当前方向，看似简单，但容易忽略嵌套 dir 属性的局部覆盖。比如外层 html[dir="rtl"]，但某个弹窗组件显式写了 dir="ltr"，此时全局判断就会失效。
更可靠的方式是监听 dir 变化（MutationObserver 观察 dir 属性），或给关键容器加 data 属性（如 data-dir-context="rtl"），再用 CSS [data-dir-context="rtl"] .btn-icon 精准控制。
- 不要依赖
window.getComputedStyle(document.body).direction——body 可能没设dir，回退到 UA 默认值 - CSS 中优先用
:dir(rtl)伪类，比 JS 注入 class 更及时、无闪动 - 服务端渲染（SSR）场景下，
dir必须在首屏 HTML 中正确写出，否则 hydration 前会出现 LTR 闪屏
真正难的不是翻转本身，而是区分哪些该翻、哪些不该翻、哪些要按语义重绘——比如一个“进度条从左到右填充”，在 RTL 下不该镜像，而应保持“从起点向终点延伸”的逻辑一致性。这个边界，得靠产品和 UI 同学一起定，不能全交给 CSS。
