加 dir="rtl" 到 <html> 仅自动翻转文本流方向、text-align: start/end 含义、Flex/Grid 主轴起始点、表单控件图标位置及滚动条默认位置；margin-left 等物理属性完全不翻转，须改用 margin-inline-start 等逻辑属性。
dir属性到底自动翻转了什么
加 dir="rtl" 到 <html> 不会把所有 left/right 都翻转，它只触发浏览器底层双向算法（Bidi Algorithm）对特定行为的响应：文本流方向、text-align: start 的含义、Flex/Grid 主轴起始点（justify-content: flex-start 在 RTL 下指向右侧）、表单控件图标位置（如 <select> 箭头、搜索框清除按钮）、滚动条默认位置。这些都不需要额外 CSS。
但 margin-left、padding-right、float: left、left: 8px 这类物理属性完全不翻转——它们永远绑定屏幕物理方向。这就是为什么仅靠 dir 无法让编辑器或工具栏正确适配。
哪些逻辑属性现在就能放心用
2026 年中主流浏览器（Chrome 120+、Firefox 125+、Safari 15.4+）已稳定支持以下三组逻辑属性，PostCSS 插件也能为旧版生成 fallback：
-
margin-inline-start/margin-inline-end/padding-inline-start/padding-inline-end/border-inline-start-width -
inset-inline-start/inset-inline-end/inset-block-start（替代left/right/top） -
text-align: start/text-align: end（text-align: left应淘汰）
float: inline-start 在 Safari 15.4+ 才可靠；旧版本仍需降级写 [dir="rtl"] { float: right; }。
立即学习“前端免费学习笔记（深入）”；
为什么必须同时设 dir 和 lang
逻辑属性依赖浏览器对书写方向的完整识别。只写 dir="rtl" 但漏掉 lang，会导致：
- 部分浏览器（尤其 Safari）对
text-align: start解析不一致 - 屏幕阅读器朗读顺序错乱（
lang决定语音引擎选词规则） -
:dir(rtl)伪类匹配失败（Safari 17.4+ 才完全支持，旧版回退需[dir="rtl"]）
正确写法是：<html dir="rtl" lang="ar-SA">。dir 和 lang 各司其职，不可互相替代。
嵌入 LTR 片段时怎么避免方向污染
阿拉伯语段落里夹英文 URL 或代码块，若不隔离，会被 RTL 环境扭曲词序或括号方向。最简方案不是写 CSS，而是直接用 HTML 属性：
- 对内联片段，用
<span dir="ltr">https://example.com</span> - 对块级内容（如代码块），用
<pre dir="ltr">或<div dir="ltr"> - 避免在 JS 中动态修改
dir—— 改完需手动触发getComputedStyle强制重绘，否则scrollLeft行为异常
真正难的不是加 dir，而是判断哪一层该加、哪一层该隔离、哪一层该用逻辑属性替代物理值——多数 bug 都出在“以为加了 dir 就万事大吉”。
