<bdi>：雙向獨立文本元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<bdi> HTML 元素告訴瀏覽器的雙向算法，要將其包含的文本與周圍的文本隔離處理。當網站動態插入某些文本但不知道插入文本的方向性時，這尤其有用。

嘗試一下

雙向文本是可能包含從左到右（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（嵌入文本）的方向性，則可以通過將 EMBEDDED-TEXT（嵌入文本）包裹在具有已知方向性的 dir 屬性設置的 <span> 中來解決此問題。但是如果你不知道方向性——例如，因為 EMBEDDED-TEXT（嵌入文本）是從數據庫讀取的或由用戶輸入的——你應該使用 <bdi> 來防止 EMBEDDED-TEXT（嵌入文本）的方向性影響其周圍。

儘管可以通過在 <span> 或其他文本格式化元素上使用 CSS 規則unicode-bidi: isolate 來實現相同的視覺效果，但 HTML 作者不應該使用這種方法，因為它不是語義化的，並且瀏覽器允許忽略 CSS 樣式。

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

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

沒有 bdi 的 RTL 文本

此範例僅使用 <span> 元素列出了比賽的獲獎者，其中一名獲獎者的名字包含 RTL 文本。在這種情況下，由中性或弱方向性字符組成的「- 1」將採用 RTL 文本的方向性，結果將是亂碼：

html

<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 的 LTR 和 RTL 文本

此範例使用 <bdi> 元素列出了比賽的獲獎者。這些元素指示瀏覽器將名稱與其嵌入上下文隔離，因此範例輸出是正確排序的：

html

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

技術摘要

內容類別	流內容、段落型內容、可感知內容。
允許的內容	段落型內容。
標籤省略	不允許，起始和結束標籤均為必需的。
允許的父元素	任何接受段落型內容的元素。
隱含的 ARIA 角色	`generic`
允許的 ARIA 角色	任何
DOM 介面	`HTMLElement`

規範

Specification
HTML Standard # the-bdi-element

瀏覽器相容性

BCD tables only load in the browser