bdiタグとは?|テキストの表記方向を前後から独立させる

bdiタグとは?|テキストの表記方向を前後から独立させる
博士
今回は、表記方向が異なる言語が混在する文書の対処方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<bdi>タグとは

 

<bdi>

対応ブラウザFirefox / Google Chrome / Safari
分類フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ


 
 
<bdi>タグは、テキストの表記方向のルールを前後から独立させるためのタグです。

Webブラウザは、言語によって表記方向を判定し、適切に表示する機能(双方向アルゴリズム)を持っています。
通常はこの機能によって、日本語や英語なら左から右、アラビア語やヘブライ語なら右から左へと正しく表示されます。

しかし、以下のように表記方向が異なる言語が混在する文書の場合、テキストが前後の表記方向の影響を受け、意図しない方向や順番で表示されてしまうことがあります。

ユーザー名と年齢

  • 正義:25
  • Jobs:30
  • حليف:32

 
 
このような問題を避けるため、<bdi>タグを使って、双方向アルゴリズムを適用しない箇所を指定することができます。
 
 

使用例

 
 

表示例

ユーザー名と年齢

  • 正義:25
  • Jobs:30
  • حليف:32

 
 
博士
<bdi>タグで独立させたテキストは、前後の表記方向に影響を与えないんじゃ。
 
 

まとめ

テキストの表記方向のルールを前後から独立させたいときは、<bdi>タグを使います。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








bdiタグとは?|テキストの表記方向を前後から独立させる