<bdi>：双向隔离元素

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

通常情况下，双向算法无需作者提供任何特殊标记即可正确处理文本，但偶尔也需要一些帮助。这就是<bdi>元素的用武之地。

<bdi>元素用于包裹一段文本，并指示双向算法将其与周围文本隔离处理。这可以通过两种方式实现：

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

例如，考虑以下文本：

EMBEDDED-TEXT - 1st place

如果EMBEDDED-TEXT为LTR，则可以正常工作。但如果EMBEDDED-TEXT为RTL，则- 1将被视为RTL文本（因为它包含中性字符和弱字符）。结果将出现乱码。

1 - EMBEDDED-TEXTst place

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

虽然可以使用CSS规则unicode-bidi: isolate应用于<span>或其他文本格式化元素来达到相同的视觉效果，但HTML作者不应使用这种方法，因为它不具有语义性，并且浏览器可以忽略CSS样式。

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

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

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

<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;
}

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

<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;
}

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

<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;
}

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