このページについて
このページではHTMLで使う事ができるbdiタグの使い方を解説しています。
bdiタグ
bdiはテキストの方向を周囲のテキストと変えたい場合に使います。これは日本ではあまり馴染みのない書き方なんですが、一部の国では右から左へ書く場合があります。その場合に日本式で書くと現地の人々からは逆方向に書かれているように見えます。それを防ぐために存在するのが、bdiです。
アラビア語のことはさっぱり分かりませんが、アラビア語は右から左へ読み書きするそうです。試しにアラビア語をコピペして、バックスペースキーで一番右の文字を削除してみたところ実際に消えたのは一番左の文字でした。そういう言語のテキスト方向を守るように定義するのが、bdiの機能となります。
2022年現在、Safariのみbdiをサポートしていません。
bdiタグの書き方
bdiはテキストの方向を守りたいものを囲むだけでOKです。アラビア語ではありませんが、仮に右から左へ書くテキストがあった場合は以下のように書きます。
<p>左から右のテキスト<bdi>右から左のテキスト</bdi>左から右のテキスト</p>このように書くと、bdiで囲んだ部分のテキストのみ言語ルールに従った方向で書かれます。
少し話はそれますが、囲んだテキスト全体を右から左へと並ばせたい場合は、bdoタグのdir属性を使います。
<p><bdo dir="rtl">左右反転したテキスト</bdo></p>こんな感じでグローバル属性であるdir属性を使って、反転させたいテキストを囲みます。実際のブラウザではこんな感じで表示されます。
左右反転したテキスト
上のテキストは改行の開始地点が左からなので、テキストが意味不明な位置からスタートしてますね。これを右端からのスタートにしたい場合は、bdoタグ以外にdir属性を付与します。
<p dir="rtl"><bdo dir="rtl">左右反転したテキスト</bdo></p>左右反転したテキスト
こんな感じになります。
bdiタグで使える属性
bdiは固有の属性は無く、グローバル属性・イベント属性に対応しています。
まとめ
bdiは日本では馴染みの無い書き方になります。大昔は日本でも右から左へ書いていましたが、今となっては左から右がほとんどです。そのためこのタグを活用する場合はアラビア語のような外国語を扱うようなサイトが適しています。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。