<bdo> 文字の表記方向を指定する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | フレージング・コンテンツ |
対応ブラウザ | caniuseで確認 |
<bdo>タグの説明
<bdo>
は、文字の基本的な表示方向を上書きし、「右読み」か「左読み」を指定します。指定された範囲の文字は、並び方が変わるだけで、文字自体が反転するわけではありません。
<bdo>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 文章の意味的な解釈には影響を与えません。見た目の装飾なのでCSSでも代用可能です。
<bdo>に指定できる主な属性
- dir="ltr"
- 左から右へ表示
- dir="rtl"
- 右から左へ表示
<bdo>の使い方とサンプル
このタグを使用する場合は、以下のような記述となります。
HTML
横書きの日本語は左から右へ表示します。<br>
<bdo dir="rtl">右から左へ表示するとこうなります。</bdo>
表示確認
横書きの日本語は左から右へ表示します。
右から左へ表示するとこうなります。
右から左へ表示するとこうなります。
<bdo>に関連するHTMLタグ
文字列の表現を指定する要素 | |
---|---|
<div> | ブロックレベル要素としての範囲を指定 |
<span> | インライン要素としての範囲を指定する |
<br> | 改行を行う |
<wbr> | 文章の中で改行可能位置を指定する |
<b> | 文字を太字にする |
<mark> | 文章の中で目立たせたい箇所をマーキングする |
<pre> | ソースを整形済みテキストとして表示する |
<bdi> | ページの書字方向とは別の書字方向を指定する |
<bdo> | 書字方向を指定する |
<ruby> | ルビを振る文字列の範囲を指定する |
<rt> | ルビの内容を指定する |
<rp> | ルビが非対応な環境で読みがなを囲う記号を指定する |
<rtc> | ルビテキストの集まりを指定する |
<sub> | 下付き文字として表示する |
<sup> | 上付き文字として表示する |
<details> | 折りたたみ可能なディスクロージャー・ウィジェットを設置する |
<summary> | 折りたたみ可能なディスクロージャー・ウィジェットの概要を設定する |