RTLCSSElectron国际化
【PC】阿语RTL适配指南
收录于 2026/5/19 14:00:50
阿语RTL适配核心要点
1. CSS 逻辑属性：让布局自动适配 RTL
传统的 CSS 使用 left/right 描述位置，在 RTL 环境下需要大量覆盖。WPS 采用逻辑属性（Logical Properties）：
| 传统属性 | 逻辑属性 | RTL 下表现 |
|---|---|---|
margin-left | margin-inline-start | 自动适配 |
padding-right | padding-inline-end | 自动适配 |
border-left | border-inline-start | 自动适配 |
关键结论：用 inline-start / inline-end 替代 left / right，布局代码无需为每种阅读方向单独维护。
2. Unicode 双向算法（UBA）：混合 LTR/RTL 文本的渲染规则
阿拉伯语和希伯来语属于 RTL 脚本，与英语等 LTR 脚本混排时，浏览器依赖 Unicode Bidirectional Algorithm (UBA) 来决定字符顺序。
隐式处理：根据字符的固有方向（Strong LTR / Strong RTL / Neutral）自动排序。 显式控制：使用 Unicode 覆盖字符改变默认方向：
U+202D(LRE) – 左到右嵌入U+202E(RLE) – 右到左嵌入U+202C(PDF) – 结束覆盖U+2067(LRI) – 左到右隔离（推荐）U+2068(FSI) – 方向隔离（推荐）U+2069(PDI) – 结束隔离
3. 富文本编辑器：对齐方向 ≠ 光标方向
这是 RTL 适配中最容易混淆的地方：
- 对齐方向（Alignment Direction）：段落文本的排列方向，可以是 LTR 或 RTL
- 光标方向（Cursor Direction）：在段落中移动光标时的前进/后退方向
正确做法：两者需要解耦。用户在 RTL 段落中按左方向键，光标应该向左移动（符合 RTL 阅读习惯），但段落文字的对齐方式保持 RTL 排版。
4. Electron 特殊注意事项
Electron 环境下的 RTL 适配需要额外关注：
- **输入法编辑器（IME）**与 RTL 光标方向的交互
- 文本选择高亮在 RTL 下的视觉方向
- 复制粘贴时剪贴板内容的双向性处理
讨论 (1)
读
读者
Q: BiDi 的全称是什么？unicode-bidi 又是什么？
A:
- BiDi 是 Bidirectional（双向文本）的缩写，指同时包含从左到右（LTR）和从右到左（RTL）脚本的文本处理场景。
unicode-bidi是 CSS 属性，用来覆盖浏览器默认的 BiDi 处理行为。主要取值：normal：按 Unicode 隐式算法处理（默认）embed：在段落内部创建一个单向的嵌入层isolate：创建隔离方向的新文本段落（外部内容不受内部影响）bidi-override：忽略 Unicode 算法，按direction属性强制覆盖plaintext：将元素内容视为中性文本（不继承父元素方向）
底层的 UBA（Unicode Bidirectional Algorithm） 是浏览器内置的双向文本算法，定义了字符重排的完整规则，CSS unicode-bidi 则提供页面级别的控制手段。