必须在元素上设置dir="rtl"并同步设置lang属性，才能正确支持rtl文字排版；仅用css的direction: rtl不可靠，需配合处理混合文本，css须改用逻辑属性。

必须在 html> 元素上设置 dir="rtl"，这是正确支持阿拉伯语、希伯来语等 RTL 文字排版的唯一可靠方式。仅靠 CSS 的 direction: rtl 无法激活浏览器完整的 RTL 感知机制，会导致光标跳转错乱、选词方向反向、复制粘贴顺序颠倒、滚动条仍在右侧、<select></select> 下拉方向不翻转等问题。

根元素 dir 属性不可省略

浏览器只在 标签带有 dir 属性时，才启用 Unicode 双向算法（UBA）并调整底层行为：

• <input> 和 <textarea></textarea> 的光标移动与退格逻辑按 RTL 习惯运行
• 双击选词以单词为单位从右向左进行
• 数字与括号（如 (123)）保持语义顺序，不被错误拆解或镜像
• 屏幕阅读器依据 dir 和 lang 组合决定语音节奏与连读规则

lang 属性必须同步设置

dir="rtl" 必须与 lang 成对使用，例如 ：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• lang="ar" 触发阿拉伯数字样式（东阿拉伯数字 ٠١٢）、字体连字（如 lam-alef 合字）
• lang="he" 启用希伯来语的元音点位渲染和标点适配
• 动态切换时，需同时更新：
  document.documentElement.setAttribute("dir", "rtl");
document.documentElement.setAttribute("lang", "ar");

混合文本中的不可控内容要用

当 RTL 段落中嵌入英文 URL、版本号、用户输入等方向不确定的字符串时，dir="rtl" 本身无法阻止 UBA 错误解析：

• 错误示例：مرحبا v2.4.1 显示为 1.4.2 v 或 moc.elpmaxe//:sptth
• 正确写法：<p dir="rtl">مرحبا <bdi>v2.4.1</bdi></p>
• <bdi></bdi> 是唯一能自动隔离双向算法影响的 HTML 元素，无需额外 CSS
• 避免用 unicode-bidi: plaintext 或 direction: ltr 替代，它们不参与 UBA，复制后仍乱序

CSS 中需改用逻辑属性适配 RTL

dir="rtl" 不会自动翻转物理盒模型属性，以下写法必须手动调整：

• 用 margin-inline-start 替代 margin-left
• 用 padding-inline-end 替代 padding-right
• 用 float: inline-start 或降级写法 dir(rtl) { float: right; }
• 用 inset-inline-start: 10px 替代 left: 10px
• 用 background-position: inline-start top 替代 background-position: left top

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！