<bdi>:双向隔离元素

双向文本是可能包含从左到右排列的字符序列 (LTR) 和从右到左排列的字符序列 (RTL) 的文本，例如嵌入英语字符串中的阿拉伯语引文。浏览器实现 Unicode 双向算法 来处理这个问题。在此算法中，字符被赋予隐式方向性：例如，拉丁字符被视为 LTR，而阿拉伯字符被视为 RTL。其他一些字符（例如空格和一些标点符号）被视为中性字符，并根据其周围字符的方向分配方向性。

¥Bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (LTR) and sequences of characters that are arranged right-to-left (RTL), such as an Arabic quotation embedded in an English string. Browsers implement the Unicode Bidirectional Algorithm to handle this. In this algorithm, characters are given an implicit directionality: for example, Latin characters are treated as LTR while Arabic characters are treated as RTL. Some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters.

通常，双向算法会做正确的事情，而无需作者提供任何特殊标记，但有时，算法需要帮助。这就是 <bdi> 发挥作用的地方。

¥Usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. That's where <bdi> comes in.

<bdi> 元素用于封装一段文本，并指示双向算法将该文本与其周围环境隔离开来处理。这有两种方式起作用：

¥The <bdi> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. This works in two ways:

• <bdi> 中嵌入的文本的方向性不会影响周围文本的方向性。
• <bdi> 中嵌入的文本的方向性不受周围文本的方向性影响。

例如，考虑一些文本，例如：

¥For example, consider some text like:

EMBEDDED-TEXT - 1st place

如果 EMBEDDED-TEXT 是 LTR，则效果很好。但如果 EMBEDDED-TEXT 是 RTL，则 - 1 将被视为 RTL 文本（因为它由中性字符和弱字符组成）。结果会出现乱码：

¥If EMBEDDED-TEXT is LTR, this works fine. But if EMBEDDED-TEXT is RTL, then - 1 will be treated as RTL text (because it consists of neutral and weak characters). The result will be garbled:

1 - EMBEDDED-TEXTst place

如果你事先知道 EMBEDDED-TEXT 的方向性，则可以通过将 EMBEDDED-TEXT 封装在 <span> 中并将 dir 属性设置为已知方向性来解决此问题。但如果你不知道方向性 - 例如，因为 EMBEDDED-TEXT 正在从数据库中读取或由用户输入 - 你应该使用 <bdi> 来防止 EMBEDDED-TEXT 的方向性影响其周围环境。

¥If you know the directionality of EMBEDDED-TEXT in advance, you can fix this problem by wrapping EMBEDDED-TEXT in a <span> with the dir attribute set to the known directionality. But if you don't know the directionality - for example, because EMBEDDED-TEXT is being read from a database or entered by the user - you should use <bdi> to prevent the directionality of EMBEDDED-TEXT from affecting its surroundings.

尽管在 <span> 或其他文本格式元素上使用 CSS 规则 unicode-bidi: isolate 可以实现相同的视觉效果，但 HTML 作者不应该使用这种方法，因为它不是语义的，并且允许浏览器忽略 CSS 样式。

¥Though the same visual effect can be achieved using the CSS rule unicode-bidi: isolate on a <span> or another text-formatting element, HTML authors should not use this approach because it is not semantic and browsers are allowed to ignore CSS styling.

在 <span dir="auto"> 中嵌入字符与使用 <bdi> 具有相同的效果，但其语义不太清晰。

¥Embedding the characters in <span dir="auto"> has the same effect as using <bdi>, but its semantics are less clear.

¥Attributes

与所有其他 HTML 元素一样，此元素支持 全局属性，但 dir 属性的行为与正常情况不同：它默认为 auto，这意味着它的值永远不会从父元素继承。这意味着除非你为 dir 指定 rtl 或 ltr 的值，否则 user agent 将根据 <bdi> 的内容确定要使用的正确方向性。

¥Like all other HTML elements, this element supports the global attributes, except that the dir attribute behaves differently than normal: it defaults to auto, meaning its value is never inherited from the parent element. This means that unless you specify a value of either rtl or ltr for dir, the user agent will determine the correct directionality to use based on the contents of the <bdi>.

¥Examples

¥No bdi with only LTR

此示例列出了仅使用 <span> 元素的竞赛获胜者。当名称仅包含 LTR 文本时，结果看起来不错：

¥This example lists the winners of a competition using <span> elements only. When the names only contain LTR text the results look fine:

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

¥No bdi with RTL text

此示例列出了仅使用 <span> 元素的竞赛获胜者，其中一位获胜者的名称由 RTL 文本组成。在这种情况下，由中性或弱方向性的字符组成的“- 1”将采用 RTL 文本的方向性，结果将出现乱码：

¥This example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of RTL text. In this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:

<ul>
  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

¥Using bdi with LTR and RTL text

此示例列出了使用 <bdi> 元素的竞赛的获胜者。这些元素指示浏览器将名称与其嵌入上下文隔离开来处理，因此示例输出的顺序正确：

¥This example lists the winners of a competition using <bdi> elements. These elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered:

<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

¥Technical summary

¥See also

• HTML 中的内联标记和双向文本
• Unicode 双向算法基础知识
• Localization
• 相关 HTML 元素：<bdo>
• 相关 CSS 属性：direction、unicode-bidi