必须在上设dir="rtl"，因为只有根元素dir属性才能触发完整rtl机制，影响placeholder渲染、光标行为、滚动条位置等；仅用direction: rtl无法实现这些底层适配。
直接在根元素上加 dir="rtl"，比只用 direction: rtl 更可靠。CSS 的 direction 属性本身不触发浏览器对表单 placeholder、滚动条位置、光标行为等的 RTL 适配，只有 HTML 的 dir 属性才能完整激活这些底层机制。
为什么不能只靠 direction: rtl 样式？
单纯给 或容器加 direction: rtl CSS 规则，会导致以下问题：
- 表单输入框的 placeholder 文字仍按 LTR 渲染（比如阿拉伯语 placeholder 显示错位）
- textarea 中光标移动方向、回车换行逻辑未切换，用户输入体验断裂
- 浏览器默认滚动条仍在右侧（RTL 页面应显示在左侧），
direction不影响此行为 -
margin-left还是作用于逻辑左边缘（即视觉右），但开发者容易误以为它“变右边距”而写错修复逻辑
dir="rtl" 必须设在 HTML 根元素上
这是唯一能触发完整 RTL 语义链的方式。实操要点：
- 优先在
上设置，而不是用 CSS 覆盖 - 若需动态切换（如语言选择器），用 JavaScript 修改
document.documentElement.dir，而非仅改 class 或 style - 服务端渲染时，根据
Accept-Language头或用户偏好，直接输出带dir="rtl"的标签 - 不要在
<table> 等语义敏感元素上单独加 <code>dir="rtl"—— 会导致<colgroup></colgroup>和<th> 顺序错乱 <h3>内嵌 LTR 内容必须显式重置</h3> <p>阿拉伯语页面里混排英文、数字、代码片段时，<code>dir="rtl"会把它们也拉进双向算法（Bidi），导致 “123.45” 被拆成 “.45 123” 或顺序颠倒。解决方法：- 用
<bdi></bdi>包裹不确定方向的外部数据（如用户昵称、搜索关键词） - 对明确是 LTR 的块，加
dir="ltr"，例如：<p dir="ltr">API key: abc123</p> - 避免用
unicode-bidi: plaintext—— 它绕过 Bidi 算法，但会破坏阿拉伯语内部连字和标点定位
inline-block 元素从右向左平铺的正确写法
想让多个
<div> 或 <code><table> 水平并排、且最右边那个是逻辑第一个（比如阿拉伯语仪表盘卡片顺序），不能依赖 <code>float或flex-direction: row-reverse—— 前者语义错误，后者会翻转所有子内容（包括文字）。正确方式：- 容器设
direction: rtl+white-space: nowrap - 子元素设
display: inline-block+vertical-align: top - 每个子元素内部再设
dir="ltr"（如果含英文/数字） - 示例：
<div style="direction: rtl; white-space: nowrap;"> <div style="display: inline-block; dir=" ltr>English card</div> <div style="display: inline-block; dir=" ltr>Another card</div> </div>
真正容易被忽略的是：RTL 不是“镜像翻转”，而是书写流重定向。你写的
margin-left: 16px永远作用于逻辑左（视觉右），别指望它自动变成“右边距”。要用margin-inline-start这类逻辑属性才安全，否则维护成本会指数上升。 - 用
