<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> 相同的效果,但其語義不太清晰。

屬性

與所有其他 HTML 元素一樣,此元素支持全域屬性,只是 dir 屬性的行為與正常情況不同:它的默認值為 auto,這意味著其值永遠不會從父元素繼承。這意味著除非你為 dir 指定了 rtlltr 的值,否則使用者代理將根據 <bdi> 的內容確定要使用的正確方向性。

範例

沒有 bdi 的 LTR 文本

此範例僅使用 <span> 元素列出了比賽的獲獎者。當名字僅包含 LTR 文本時,結果看起來不錯:

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

沒有 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>

使用 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>

技術摘要

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

規範

Specification
HTML
# the-bdi-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bdi

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見