dir="rtl"自动翻转文本流方向、text-align:start/end含义、Flex/Grid主轴起始点、表单控件图标位置及滚动条默认位置；但margin-left、padding-right、float:left、left/right定位等物理属性完全不翻转，须改用逻辑属性或[dir="rtl"]重写。
dir="rtl"到底自动翻转了什么
加 dir="rtl" 到 <html> 是起点，不是终点。它触发的是浏览器对「书写模式」的底层响应，不是 CSS 重绘开关。真正被自动翻转的只有：文本流方向、text-align: start/end 的含义、Flex/Grid 主轴起始点（justify-content: flex-start 在 RTL 下指向右侧）、表单控件图标位置（如 <select> 箭头、<input type="search"> 清除按钮）、滚动条默认位置。这些都不需要你写一行额外 CSS。
哪些 CSS 属性根本不会自动翻转
所有含 left/right 的物理属性都保持原样： margin-left 还是往左推，padding-right 还是往右留空，float: left 还是往左浮——在 RTL 下它们反而造成错位。同理：background-position: left top 不会变成“右上”，inset: 0 0 0 10px 的 10px 依然在左边。这些必须手动处理，否则布局崩坏。
- 定位类：
left/right→ 改用inset-inline-start/inset-inline-end（或兼容写法right配合dir="rtl"） - 盒模型类：
margin-left/padding-right→ 改用margin-inline-start/padding-inline-end - 浮动类：
float: left→ 改用float: inline-start - 背景类：
background-position: left center→ 改用background-position: inline-start center
为什么 margin-inline: 10px 20px 有时像没生效
这不是 bug，是语法误用。margin-inline 是简写，必须两个值：margin-inline: 10px 20px 表示 margin-inline-start: 10px + margin-inline-end: 20px。只写一个值如 margin-inline: 10px 是无效声明，浏览器直接忽略。更隐蔽的问题是：父元素没显式设 direction 或 writing-mode，浏览器按默认 ltr 解析，此时 margin-inline-start 就等于 margin-left——看起来“没变”，其实是对的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 要验证是否生效，检查 computed style 中
margin-inline-start和margin-inline-end的实际计算值，别只盯margin-inline声明行 - 在
contenteditable容器中，必须显式设style="direction: ltr;"（哪怕值是默认），否则逻辑属性可能降级为物理映射 - Safari ≤15.3 对
margin-inline: 10px 20px静默不支持，得拆成两行：margin-inline-start: 10px; margin-inline-end: 20px;
混合内容里阿拉伯数字为啥顺序乱了
这是 Unicode 双向算法（Bidi Algorithm）在起作用，不是 CSS 能控制的。阿拉伯语文本中夹杂的拉丁数字（如电话号、版本号）会被强制按 RTL 规则重排，导致 “+965 2222 3333” 显示成 “3333 2222 569+”。unicode-bidi: plaintext 不能用——它绕过 Bidi 算法，会让阿拉伯字母本身渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 对纯数字、带符号数字、URL、邮箱，一律用
<bdi>包裹：<bdi>+965 2222 3333</bdi> - 对已知 LTR 的固定字符串（如 “iOS 18”、“v2.4.1”），显式加
dir="ltr"：<span dir="ltr">iOS 18</span> - 不要依赖
dir="auto"处理用户输入——它只看首个强字符，遇到 “٢٠٢٦-06-18” 这种阿拉伯数字开头的日期仍会误判
真正难的不是加 dir="rtl"，而是识别哪些地方看似“方向无关”，其实已被物理属性悄悄绑定死了——比如一个 margin-right: 16px 的卡片间距，在 RTL 下就变成了“左边距”，而你根本没意识到它正在破坏阅读流的连续性。
