<bdo>: 双方向文字列上書き要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<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>