直接用margin-inline-start、padding-inline-end、text-align:start三类逻辑属性配合dir="rtl"和lang属性，即可让移动端HTML编辑器原生适配RTL语言——无需[dir="rtl"]覆盖规则或JS动态切类；因margin-left等物理属性无视dir，在移动端WebView中仍推元素至屏幕左，破坏视觉起点与双向算法，而逻辑属性依文本流自动映射方向。
直接用 margin-inline-start、padding-inline-end、text-align: start 这三类逻辑属性，配合根元素 dir="rtl" 和 lang 属性，就能让移动端 HTML 编辑器或表单控件原生适配 RTL 语言——不需要写 [dir="rtl"] 覆盖规则，也不依赖 JS 动态切类。
为什么 margin-left 在移动端 RTL 下会错位
移动端 WebView（尤其旧版 Safari 和安卓系统内置浏览器）对物理方向属性毫无“方向感知”：加了 dir="rtl" 后，margin-left: 12px 依然把按钮往屏幕左边推，但阿拉伯语用户视觉起点在右，结果按钮悬在文字末尾外侧，工具栏断裂。更糟的是，这类错误常静默发生——DevTools 里看不出异常，但用户操作流已中断。
-
margin-left是绝对方向，和dir无关；margin-inline-start才真正表示“文本流起始侧” - 移动端 contenteditable 光标定位极度依赖浏览器双向算法（Bidi Algorithm），物理属性会干扰其计算
- 部分安卓 WebView（如 Android 10 系统 WebView ≤ 87）完全忽略
margin-inline简写，必须拆成margin-inline-start和margin-inline-end
text-align: start 比 text-align: left 更可靠
在移动端，text-align: left 遇到 RTL 文本时强制左对齐，导致阿拉伯语段落右侧大片留白；而 text-align: start 始终对齐到当前书写方向的“开头”，LTR 下是左，RTL 下是右，且兼容性更好（Chrome 87+、Firefox 89+、Safari 15.4+ 均支持）。
- 别用
text-align: left/right控制段落对齐，它们已被逻辑值取代 -
text-align: start影响换行位置、首行缩进、光标停靠点，对编辑器至关重要 - 某些旧版 iOS Safari（≤15.3）不识别
text-align: start，需用@supports (text-align: start)包裹并 fallback 到text-align: left+[dir="rtl"] { text-align: right; }
移动端必须改的四个关键位置
不是全量替换，而是锁定方向敏感节点。以下四类在移动端极易出问题，不换就会导致按钮错位、光标跳变、图标脱离文字、输入框内边距反向：
立即学习“前端免费学习笔记（深入）”；
- 工具栏按钮组：
margin-inline-end: 8px替代margin-right: 8px，保证按钮始终按阅读顺序排列（LTR 从左到右，RTL 从右到左） -
contenteditable容器内边距：padding-inline-start: 16px确保光标首次进入时停在视觉起点（LTR 是左，RTL 是右） - 行内图标（如加粗、链接按钮）：
margin-inline-start: 6px让图标紧贴文字“开头”，而非固定在物理左侧 - 表单标签与输入框间距：
margin-inline-end: 12px替代margin-right: 12px，避免 RTL 下标签被挤到输入框右侧
兼容性陷阱：别信 PostCSS 自动补全
移动端浏览器版本碎片化严重，PostCSS 插件生成的 margin-left fallback 往往不生效——因为旧 WebView 解析 CSS 时可能跳过整条规则，或只认物理属性而忽略逻辑属性声明。
- 必须手动用
@supports包裹逻辑写法，再在外层写物理 fallback：@supports (margin-inline-start: 1px) { .toolbar-btn { margin-inline-end: 8px; } } @supports not (margin-inline-start: 1px) { .toolbar-btn { margin-right: 8px; } [dir="rtl"] .toolbar-btn { margin-right: 0; margin-left: 8px; } } -
padding-block在 iOS Safari 15.3 及更早版本中不触发重排，DevTools 也看不到计算值，建议双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px; - 仅设
dir="rtl"不够：必须同步设lang="ar"或lang="he"，否则 Safari 中contenteditable光标移动异常，数字输入错乱
最易被忽略的点是：逻辑属性生效的前提是浏览器正确解析 dir 和 lang，而很多移动端框架（如 Cordova、Capacitor）默认不透传 HTML 根节点的 lang，得手动注入。
