<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>有名な海辺の歌</h1>

<p>英語の歌 "Oh I do like to be beside the seaside"</p>

<p>
  ヘブライ語では次のように見えます。
  <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>
</p>

<p>
  コンピュータのメモリーには、これは次のように格納されます。
  <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
</p>

html {
  font-family: sans-serif;
}

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

仕様書

Specification
HTML
# the-bdo-element

ブラウザーの互換性

関連情報

  • 関連する HTML 要素: <bdi>