<bdo>: 双方向文字列上書き要素

Baseline Widely available

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

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

/* stylelint-disable-next-line block-no-empty */
bdo {
}

テキストの文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません（ですから、例えば、文字は裏返しにはなりません）。

属性

この要素にはグローバル属性があります。

dir

この要素の内容において、テキストが描画される方向です。以下の値が指定可能です。

ltr: テキストを左から右へ (left-to-right) 向かわせることを意味する指定。
rtl: テキストを右から左へ (right-to-left) 向かわせることを意味する指定。

例

html

<!-- 書字方向を切り替える -->
<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 ロール	対応するロールなし
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLElement`。Gecko 1.9.2 (Firefox 4) 以前では、Firefox はこの要素に対し `HTMLSpanElement` インターフェイスを実装しています。

仕様書

Specification
HTML # the-bdo-element

ブラウザーの互換性

BCD tables only load in the browser