<html dir="rtl">不可替代，因浏览器仅在此时激活完整RTL机制，涵盖光标、选区、滚动条、下拉菜单等；CSS的direction: rtl不触发Unicode双向算法，无法修正混合文本乱序。
必须在 <html> 元素上设 dir="rtl"，仅靠 CSS 的 direction: rtl 无法正确驱动表单光标、选区逻辑、滚动条位置和下拉菜单方向 —— 这不是“够不够用”的问题，而是浏览器根本不会启用 RTL 感知机制。
为什么 <html dir="rtl"> 不可替代
浏览器只在根元素带 dir 属性时，才完整激活 RTL 感知：包括 <input> 和 <textarea> 的光标跳转、双击选词方向、复制粘贴顺序、<select> 下拉项翻转、滚动条默认出现在左侧。旧版 Safari 中，仅给 <body> 或某个 <div> 加 dir="rtl" 就会触发光标错乱、数字倒序、括号反向等行为。
实操建议：
-
<html dir="rtl" lang="ar">必须成对设置 ——lang决定字体连字、数字样式（如阿拉伯数字 vs. 东阿拉伯数字）、屏幕阅读器语音规则 - 动态切换时，用 JavaScript 同时改两个属性：
document.documentElement.setAttribute("dir", "rtl")和document.documentElement.setAttribute("lang", "ar") - 不要用
document.body.setAttribute("dir", "rtl")替代，它不生效
<bdi> 是混合文本中 URL/版本号乱序的唯一可靠解法
纯 dir="rtl" 下，阿拉伯语段落里的 https://example.com 或 v2.4.1 会被 Unicode 双向算法（UBA）错误拆解，显示为 1.4.2 v API 或 moc.elpmaxe//:sptth —— 因为 UBA 需要 HTML 的 dir 触发，而 direction: ltr 的 CSS 不参与该算法。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 对外部不可控文本（如用户输入、API 返回的域名/版本号）一律用
<bdi>包裹：<p dir="rtl">مرحبا <bdi>v2.4.1</bdi></p> - 避免用
unicode-bidi: plaintext或direction: ltr替代<bdi>，前者不触发 UBA，复制出来仍是乱序 -
<input dir="auto">或<input dir="rtl">必须显式设置，否则阿拉伯语输入时退格键行为异常
哪些 CSS 属性不会随 dir="rtl" 自动翻转
dir="rtl" 会改变 text-align: start 的对齐方向、Flex 主轴起点、Grid 的 justify-content 含义，但以下物理属性完全不受影响，必须手动处理：
-
margin-left/padding-right→ 改用margin-inline-start/padding-inline-end -
float: left→ 改用float: inline-start，或降级写法：dir(rtl) { float: right; } -
left: 10px（绝对定位）→ 改用inset-inline-start: 10px，或兼容写法：dir(rtl) { right: 10px; } -
background-position: left top→ 改用background-position: inline-start top -
text-align: right→ 改用text-align: end（始终优先用start/end，而非left/right）
特别注意：flex-direction: row-reverse 是常见误操作 —— 若容器已设 dir="rtl"，再加 row-reverse 会导致项目顺序与阅读逻辑冲突。
中文页面里嵌入 RTL 内容的边界感
中文本身是 LTR 语言，强行给整页加 dir="rtl" 不仅无益，反而让顿号、句号、引号位置错乱，表格列顺序颠倒，序号（如“一、二、三”）倒序渲染。真正适用场景非常有限：
- 嵌入希伯来语/阿拉伯语短语（如品牌名、地名）
- 展示 RTL 语言的代码片段（如阿拉伯语注释的 JS）
- UI 镜像调试（非生产环境）
实操建议：优先用 <bdi> 包裹不确定方向的外部数据；若必须局部 RTL，只在最小必要容器上设 dir="rtl"，且避开 <table> —— 在 <table> 上直接设 dir="rtl" 会导致 <colgroup> 和 <th> 顺序混乱，应改用 <table dir="rtl"> 并测试列宽继承。
最易被忽略的点：RTL 页面中，<textarea> 的 ::placeholder 默认仍按 LTR 渲染，需额外加 dir="rtl" 或用 direction: rtl 显式覆盖。
