HTML国际化环境下怎么处理从右向左的文字排版？-html教程-PHP中文网

不可替代，因浏览器仅在此时激活完整rtl机制，涵盖光标、选区、滚动条、下拉菜单等；css的direction: rtl不触发unicode双向算法，无法修正混合文本乱序。

html国际化环境下怎么处理从右向左的文字排版？

必须在元素上设 dir="rtl"，仅靠 CSS 的 direction: rtl 无法正确驱动表单光标、选区逻辑、滚动条位置和下拉菜单方向 —— 这不是“够不够用”的问题，而是浏览器根本不会启用 RTL 感知机制。

为什么不可替代

浏览器只在根元素带 dir 属性时，才完整激活 RTL 感知：包括 <input> 和 <textarea></textarea> 的光标跳转、双击选词方向、复制粘贴顺序、<select></select> 下拉项翻转、滚动条默认出现在左侧。旧版 Safari 中，仅给或某个 <div> 加 <code>dir="rtl" 就会触发光标错乱、数字倒序、括号反向等行为。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须成对设置 —— lang 决定字体连字、数字样式（如阿拉伯数字 vs. 东阿拉伯数字）、屏幕阅读器语音规则
动态切换时，用 JavaScript 同时改两个属性：document.documentElement.setAttribute("dir", "rtl") 和 document.documentElement.setAttribute("lang", "ar")
不要用 document.body.setAttribute("dir", "rtl") 替代，它不生效

`<bdi></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></bdi> 包裹：<p dir="rtl">مرحبا <bdi>v2.4.1</bdi></p>
避免用 unicode-bidi: plaintext 或 direction: ltr 替代 <bdi></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></bdi> 包裹不确定方向的外部数据；若必须局部 RTL，只在最小必要容器上设 dir="rtl"，且避开 <table> —— 在 <code><table> 上直接设 <code>dir="rtl" 会导致 <colgroup></colgroup> 和 <th> 顺序混乱，应改用 <code><table dir="rtl"> 并测试列宽继承。 <p>最易被忽略的点：RTL 页面中，<code><textarea></textarea> 的 ::placeholder 默认仍按 LTR 渲染，需额外加 dir="rtl" 或用 direction: rtl 显式覆盖。