cman.jpWEBページ作成
広告
<bdi> 「隔離テキスト(双方向)」[読み方：ビーディーアイ]
日本語や英語などは左から右に書きますが、アラビア語やヘブライ語などは右から左に書きます。この文字を左右混在させたい場合に<bdi>タグを利用します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<bdi>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<bdi> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ パルパブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ | 不可 |
<bdi> の属性
【構文】
<bdi dir="左右向き">～内容～</bdi>
| 属性 | 意味 | 値のサンプルなど | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| dir="値" | 文字を表示する方向（左右） |
|
| グローバル属性 |
| |
| イベント属性 |
| |
<bdi>タグのサンプル
<p>英語の「こんにちは」は、「Hello」です。</p>
<p>アラビア語の「こんにちは」は、「<bdi dir="rtl">السلام عليكم</bdi>」です。</p>
<p>アラビア語の「こんにちは」は、「<bdi dir="rtl">السلام عليكم</bdi>」です。</p>
英語の「こんにちは」は、「Hello」です。
アラビア語の「こんにちは」は、「السلام عليكم」です。
留意事項
- dir属性の初期値は「auto」となります。
dir属性はグローバル属性で、<bdi>タグ以外の初期値は、親要素から継承されます。
| 関連するHTMLタグ | |
|---|---|
| bdo | 書字方向（左右） |
| 関連するCSS(STYLE) | |
|---|---|
| direction | 書字方向 |
| unicode-bidi | 双方向アルゴリズムの変更 |
| writing-mode | 文字の縦書き |
広告