<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