<bdo>: 雙向文字覆蓋元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<bdo> HTML 元素會覆蓋文本當前的排版方向,以便其中的文字以不同的方向渲染。

試一試

<h1>Famous seaside songs</h1>

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>
  Looks like this in Hebrew:
  <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>
</p>

<p>
  In the computer's memory, this is stored as
  <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
</p>
html {
  font-family: sans-serif;
}

bdo {
  /* Add your styles here */
}

文字的字元會從給定方向的起始點繪製;單個字元的方向不受影響(例如,字元不會被反向繪製)。

屬性

此元素的屬性包括全域性屬性

dir

此元素內容中文字應渲染的方向。可能的值為:

  • ltr: 表示文字應從左到右顯示。
  • rtl: 表示文字應從右到左顯示。

示例

html
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

結果

注意

HTML 4 規範未為該元素指定事件;這些事件是在 XHTML 中新增的。這很可能是一個疏忽。

技術摘要

內容類別 流式內容語句內容、明顯內容。
允許內容 短語內容.
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受短語內容的元素。
隱式 ARIA 角色 generic
允許的 ARIA 角色 任意
DOM 介面 HTMLElement 直到 Gecko 1.9.2(Firefox 4)為止,Firefox 都為該元素實現了 HTMLSpanElement 介面。

規範

規範
HTML
# the-bdo-element

瀏覽器相容性

另見

  • 相關 HTML 元素:<bdi>