双向文本算法（BiDi Algorithm）：`unicode-bidi: isolate` 与 `direction: rtl` 的重排逻辑

双向文本算法 (BiDi Algorithm): unicode-bidi: isolate 与 direction: rtl 的重排逻辑

大家好，今天我们来深入探讨双向文本算法（BiDi Algorithm），重点关注 unicode-bidi: isolate 和 direction: rtl 这两个 CSS 属性对文本重排的影响。理解 BiDi 算法对于正确显示包含从左至右 (LTR) 和从右至左 (RTL) 文本混合的内容至关重要，特别是在国际化 Web 应用中。

1. BiDi 算法基础

BiDi 算法的核心目标是将包含不同书写方向的文本段落正确地排列。它由 Unicode 标准定义，并在各种文本渲染引擎中实现。算法主要分为以下几个步骤：

1. 段落分解： 将文本分解为段落，通常以换行符或 HTML 块级元素为界。
2. 隐式方向性解析： 根据 Unicode 字符的固有方向性（例如，拉丁字母是 LTR，阿拉伯字母是 RTL）分配基本方向性级别。
3. 显式方向性标记处理： 处理显式的方向性标记，如 LRE (Left-to-Right Embedding), RLE (Right-to-Left Embedding), LRO (Left-to-Right Override), RLO (Right-to-Left Override), PDF (Pop Directional Format), LRI (Left-to-Right Isolate), RLI (Right-to-Left Isolate), FSI (First Strong Isolate), PDI (Pop Directional Isolate)。
4. 弱类型字符解析： 处理既不是强 LTR 也不是强 RTL 的字符，例如标点符号和数字。这些字符的方向性通常取决于相邻的强类型字符。
5. 数字处理： 根据上下文调整数字的方向性。
6. 级别解析： 根据上述步骤计算每个字符的最终双向级别。
7. 重排： 根据双向级别对文本进行重排，使得具有较高级别的字符出现在右侧。

2. direction 属性

direction 属性指定了块级元素、嵌入元素或行内元素的文本方向。它可以设置为以下值：

• ltr (Left-to-Right)：默认值，文本从左向右排列。
• rtl (Right-to-Left)：文本从右向左排列。
• inherit：从父元素继承 direction 属性。

direction 属性主要影响以下几个方面：

• 块级元素： 决定了块级元素中文本的默认方向，以及元素内容的起始位置。
• 行内元素： 决定了行内元素在父元素中的排列方向。
• 表格单元格： 决定了表格单元格中内容的默认方向。

例如：

<div style="direction: rtl;">
  这是一个从右向左排列的文本。 This is some English text.
</div>

<div style="direction: ltr;">
  这是一个从左向右排列的文本。 هذا نص باللغة العربية.
</div>

代码解释：

第一个 div 的 direction 设置为 rtl，因此文本从右向左排列。即使包含英文字符，整个段落的起始方向也是从右向左。

第二个 div 的 direction 设置为 ltr，文本从左向右排列。阿拉伯语文本会根据其固有方向性进行处理，但整个段落的起始方向是从左向右。

3. unicode-bidi 属性

unicode-bidi 属性控制元素如何参与双向文本的排列。它影响 BiDi 算法如何处理该元素及其内容。常见的取值包括：

• normal：元素不参与双向算法的额外处理。
• embed：创建一个双向嵌入。元素的 direction 属性决定了嵌入的方向。
• bidi-override：创建一个双向覆盖。元素的 direction 属性强制指定文本的方向，忽略字符的固有方向性。
• isolate：创建一个双向隔离。元素的内容被视为一个独立的双向段落，与周围的文本隔离。
• isolate-override：创建一个双向隔离覆盖。结合了 isolate 和 bidi-override 的特性。
• plaintext：用于处理从纯文本源导入的内容。

unicode-bidi: isolate 的作用：

unicode-bidi: isolate 是今天我们讨论的重点。它创建了一个 双向隔离上下文。这意味着元素的内容被视为一个独立的双向段落。隔离上下文的主要特性如下：

• 独立性： 元素的内容的 BiDi 处理完全独立于周围的文本。
• 边界方向性： 隔离上下文具有明确的起始和结束方向性，这影响了其在周围文本中的排列方式。
• 防止污染： 隔离上下文可以防止其内部的方向性影响周围的文本，反之亦然。

4. direction: rtl 与 unicode-bidi: isolate 的组合

当 direction: rtl 与 unicode-bidi: isolate 结合使用时，会产生以下效果：

1. 创建隔离上下文： unicode-bidi: isolate 创建一个双向隔离上下文。
2. 设置方向性： direction: rtl 将隔离上下文的方向性设置为从右向左。这意味着：
   • 隔离上下文内部的文本将以 RTL 为主导方向进行排列。
   • 隔离上下文在外部环境中被视为一个 RTL 块。

示例：

<div style="direction: ltr;">
  Left-to-right text before.
  <span style="direction: rtl; unicode-bidi: isolate;">
    Right-to-left text. English text. 123.
  </span>
  Left-to-right text after.
</div>

渲染结果：

Left-to-right text before. .321 .txet hsilgnE .txet tfel-ot-thgiR Left-to-right text after.

详细解释：

1. 外部 div 的 direction 设置为 ltr，因此外部文本从左向右排列。
2. 内部 span 的 direction 设置为 rtl，并且 unicode-bidi 设置为 isolate。这意味着 span 的内容被视为一个独立的 RTL 段落。
3. span 内部的文本 "Right-to-left text. English text. 123." 首先根据 RTL 方向进行排列，所以变成了".321 .txet hsilgnE .txet tfel-ot-thgiR"。 注意这里 123 也被反转了。
4. 由于 span 是一个隔离上下文，它的方向性不会影响外部文本，反之亦然。span 作为一个整体被放置在外部 LTR 上下文中的正确位置。

没有 unicode-bidi: isolate 的情况：

如果我们移除 unicode-bidi: isolate，会发生什么？

<div style="direction: ltr;">
  Left-to-right text before.
  <span style="direction: rtl;">
    Right-to-left text. English text. 123.
  </span>
  Left-to-right text after.
</div>

渲染结果：

Left-to-right text before. 321 .txet hsilgnE .txet tfel-ot-thgiR. Left-to-right text after.

详细解释：

1. 没有 unicode-bidi: isolate，span 不再是隔离上下文。
2. span 的 direction: rtl 仍然会影响其内部文本的排列，将 "Right-to-left text. English text. 123." 反转为 ".321 .txet hsilgnE .txet tfel-ot-thgiR"。
3. 但是，由于没有隔离，span 的 RTL 方向性会 影响 周围的 LTR 文本。BiDi 算法会尝试在整个段落中找到一个平衡，这通常会导致意想不到的重排，尤其是在包含数字和标点符号的情况下。

在这个例子中，你可以看到句点的位置发生了变化，因为它受到了 RTL 文本的影响。

5. 实际应用场景

unicode-bidi: isolate 在以下场景中特别有用：

• 用户生成内容 (UGC)： 当用户输入可能包含不同书写方向的文本时，使用 isolate 可以防止用户的文本破坏页面的整体布局。例如，评论区或论坛。
• 动态数据： 从数据库或 API 获取的数据可能包含不同方向的文本。使用 isolate 可以确保数据在任何上下文中都能正确显示。
• 组件化开发： 在构建可重用的 UI 组件时，使用 isolate 可以确保组件的内部方向性不会影响其在不同环境中的显示。
• 避免全局样式污染： 某些全局样式可能会意外地改变文本方向。使用 isolate 可以保护特定元素免受这些全局样式的影响。

示例：评论区

假设我们有一个评论区，用户可以输入任何文本。为了防止恶意用户通过插入 RTL 控制字符来破坏页面布局，我们可以使用 unicode-bidi: isolate：

<div class="comment">
  <div class="comment-author">John Doe</div>
  <div class="comment-text" style="unicode-bidi: isolate;">
    This is a great article!
  </div>
</div>

<div class="comment">
  <div class="comment-author">أحمد</div>
  <div class="comment-text" style="unicode-bidi: isolate;">
    مقال ممتاز! This is also a good point.
  </div>
</div>

在这个例子中，每个评论的 comment-text 都使用了 unicode-bidi: isolate。即使用户的评论包含 RTL 文本或恶意控制字符，它也不会影响页面上的其他内容。

6. isolate-override 和 plaintext

除了 isolate，unicode-bidi 属性还有其他一些有用的值，值得一提：

• isolate-override： 结合了 isolate 和 bidi-override 的特性。它创建一个隔离上下文，并且强制使用 direction 属性指定的方向，忽略字符的固有方向性。这通常用于需要完全控制文本方向的情况，但要谨慎使用，因为它可能会导致文本难以阅读。

  <div style="direction: ltr;">
    Left-to-right text before.
    <span style="direction: rtl; unicode-bidi: isolate-override;">
      Right-to-left text. English text. 123.
    </span>
    Left-to-right text after.
  </div>

  在这个例子中，即使 "Right-to-left text. English text. 123." 包含 LTR 字符，它也会被强制按照 RTL 方向排列，导致文本完全反向显示。

• plaintext： 用于处理从纯文本源导入的内容。它假定文本是纯文本，没有显式的方向性标记，并应用 BiDi 算法来确定文本的方向。这在处理遗留数据或需要从纯文本文件动态生成内容时非常有用。

  <div style="unicode-bidi: plaintext;">
    This is some text from a plaintext file. هذا نص من ملف نصي عادي.
  </div>

  在这个例子中，plaintext 会自动检测文本中的 RTL 字符，并相应地调整文本的排列方式。

7. 最佳实践

在使用 unicode-bidi 和 direction 属性时，请遵循以下最佳实践：

• 始终为包含混合方向文本的元素设置 direction 属性。 这可以确保 BiDi 算法能够正确地处理文本。
• 仅在必要时使用 unicode-bidi: isolate。 过度使用 isolate 可能会导致不必要的隔离，并使文本难以阅读。
• 避免使用 unicode-bidi: bidi-override，除非你真的需要强制指定文本的方向。 bidi-override 会忽略字符的固有方向性，这可能会导致文本显示不正确。
• 测试你的代码在不同的浏览器和操作系统上的显示效果。 BiDi 算法的实现可能因浏览器而异。
• 使用 Unicode 控制字符 (例如 LRE, RLE, LRO, RLO) 来处理复杂的双向文本布局。 虽然 CSS 属性可以处理大多数情况，但在某些情况下，使用控制字符可以提供更精细的控制。但是，尽量避免过度使用控制字符，因为它们会使文本难以编辑和维护。

• 考虑使用 HTML5 的 <bdi> 元素。 <bdi> 元素本质上等同于 unicode-bidi: isolate，但它更语义化，并且更容易理解。

  <div style="direction: ltr;">
    Left-to-right text before.
    <bdi style="direction: rtl;">
      Right-to-left text. English text. 123.
    </bdi>
    Left-to-right text after.
  </div>

  这段代码与使用 <span> 和 unicode-bidi: isolate 的例子具有相同的效果，但更易于阅读和维护。

8. 常见问题

• 数字反转： 在 RTL 上下文中，数字可能会被错误地反转。可以使用 Unicode 控制字符 LRM (Left-to-Right Mark) 来防止数字反转。例如：123‎。
• 标点符号位置： 标点符号的位置可能会在 LTR 和 RTL 上下文中有所不同。可以使用 CSS punctuation-trim 属性来控制标点符号的位置。
• 文本截断： 当文本被截断时，可能会出现方向性问题。确保在截断文本之前正确处理 BiDi 信息。
• 嵌套隔离上下文： 避免过度嵌套隔离上下文。过多的嵌套可能会导致性能问题和难以预测的文本布局。

9. 总结：正确使用隔离属性，保证文本正确显示

今天我们深入探讨了 unicode-bidi: isolate 和 direction: rtl 的组合使用，以及它们在双向文本处理中的重要性。 理解这些属性对于构建国际化的 Web 应用至关重要，希望通过今天的讲解，大家能够更好地掌握 BiDi 算法，并能有效地处理混合方向的文本，避免潜在的布局问题。

更多IT精英技术系列讲座，到智猿学院