<bdi>:雙向獨立文本元素
<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
(en-US) 屬性設置的 <span>
中來解決此問題。但是如果你不知道方向性——例如,因為 EMBEDDED-TEXT
(嵌入文本)是從數據庫讀取的或由用戶輸入的——你應該使用 <bdi>
來防止 EMBEDDED-TEXT
(嵌入文本)的方向性影響其周圍。
儘管可以通過在 <span>
或其他文本格式化元素上使用 CSS 規則unicode-bidi
(en-US): isolate
來實現相同的視覺效果,但 HTML 作者不應該使用這種方法,因為它不是語義化的,並且瀏覽器允許忽略 CSS 樣式。
在 <span dir="auto">
中嵌入字符具有與使用 <bdi>
相同的效果,但其語義不太清晰。
屬性
與所有其他 HTML 元素一樣,此元素支持全域屬性 (en-US),只是 dir
(en-US) 屬性的行為與正常情況不同:它的默認值為 auto
,這意味著其值永遠不會從父元素繼承。這意味著除非你為 dir
指定了 rtl
或 ltr
的值,否則使用者代理 (en-US)將根據 <bdi>
的內容確定要使用的正確方向性。
範例
沒有 bdi 的 LTR 文本
此範例僅使用 <span>
元素列出了比賽的獲獎者。當名字僅包含 LTR 文本時,結果看起來不錯:
<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 文本的方向性,結果將是亂碼:
<ul>
<li><span class="name">اَلأَعْشَى</span> - 1st place</li>
<li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>
使用 bdi 的 LTR 和 RTL 文本
此範例使用 <bdi>
元素列出了比賽的獲獎者。這些元素指示瀏覽器將名稱與其嵌入上下文隔離,因此範例輸出是正確排序的:
<ul>
<li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
<li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>
技術摘要
內容類別 | 流內容、段落型內容、可感知內容。 |
---|---|
允許的內容 | 段落型內容。 |
標籤省略 | 不允許,起始和結束標籤均為必需的。 |
允許的父元素 | 任何接受段落型內容 的元素。 |
隱含的 ARIA 角色 | generic (en-US) |
允許的 ARIA 角色 | 任何 |
DOM 介面 | HTMLElement (en-US) |
規範
Specification |
---|
HTML Standard # the-bdi-element |
瀏覽器相容性
BCD tables only load in the browser
參見
- HTML 中的內聯標記和雙向文本
- Unicode 雙向算法基礎知識
- 在地化
- 相關 HTML 元素:
<bdo>
- 相關 CSS 屬性:
direction
(en-US)、unicode-bidi
(en-US)