<bdi></bdi>

ブラウザ
  • Cr
  • Fx
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

bdi要素は、隔離されたテキストを表します。この要素によって隔離されたテキストは、周囲の書字方向に影響を及ぼしません。


<bdi>隔離されたテキストを表します</bdi>
属性 値
グローバル属性（この要素上では、dir属性が特別な意味を持ちます）
dir="" 書字方向 auto 自動 （初期値）
ltr 左から右へを指定
rtl 右から左へを指定
  • bdi要素で使用する場合に限り、dir属性の初期値が auto になります。

bdi要素は、書字方向が混在する箇所で使用することになります。

例えば、下記の名前の部分に日本語 英語 アラビア語の名前を書き込んだとします。

<p>User 名前 : 2012/12/26</p>

日本語と英語の場合は問題ありませんが、右から左へと表記されるアラビア語の場合は、双方向アルゴリズムの影響によって次のような表示になってしまいます。（名前に続く記号や数字が、本来とは逆の方向に配置されてしまいます）

User 26/12/2012 :アラビア語の名前

名前の部分をbdi要素で隔離しておくと、次のように本来の配置で表示されるようになります。

<p>User <bdi>名前</bdi> : 2012/12/26</p>

User アラビア語の名前: 2012/12/26

使用例


<ul style="font-size: 150%;">
<li>User 太郎 : 2012/12/26</li>
<li>User Eric : 2012/12/26</li>
<li>User &#1571;&#1614;&#1587;&#1618;&#1593;&#1614;&#1583; : 2012/12/26</li>
</ul>

<ul style="font-size: 150%;">
<li>User <bdi>太郎</bdi> : 2012/12/26</li>
<li>User <bdi>Eric</bdi> : 2012/12/26</li>
<li>User <bdi>&#1571;&#1614;&#1587;&#1618;&#1593;&#1614;&#1583;</bdi> : 2012/12/26</li>
</ul>
表示例
  • User 太郎 : 2012/12/26
  • User Eric : 2012/12/26
  • User أَسْعَد : 2012/12/26
  • User 太郎 : 2012/12/26
  • User Eric : 2012/12/26
  • User أَسْعَد : 2012/12/26