HTML5における<bdo>タグの使い方

<bdo>タグは、文字表記の方向を指定する時に使用します。日本語や英語は、左から右方向の文字表記ですが、アラビア語やヘブライ語といった、逆の右から左方向の文字表記の言語もあります。そのような場合に利用することができます。

今回は、HTML5における<bdo>タグの使い方をご紹介します。

HTML5における<bdo>タグの使い方

使い方として<bdo>タグの中にdirという属性で方向を指定します。

 <p>
    <bdo dir="ここに方向">
    文章
    </bdo>
 </p>

サンプルコードになります。dirはdirectionalの略で、方向という意味です。

  • 右から左に指定したい時:「rtl」( right - to leftという意味)
  • 左から右に指定したい時:「ltr」 (left - to -rightという意味)

右から左の場合(rtl)

 <p>
    <bdo dir="rtl">
    親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。
    </bdo>
  </p>

スクリーンショット 2016-05-16 14.52.28

このように日本語だと少しわけのわからない文章になります。

左から右の場合(ltr)

<p>
    <bdo dir="ltr">
    親譲おやゆずりの無鉄砲むてっぽうで小供の時から損ばかりしている。
    </bdo>
</p>

スクリーンショット 2016-05-16 14.54.31

<bdo>タグを使うときの注意すべき点

スタイリングの目的では使用は使用しないようにしてください。もしスタイリングとして使いたい時は、CSSで行いましょう。

デフォルトでは、左から右なのでltrはあまり使う機会がないかもしれませんが、rtlを指定してある要素の中で、一部分だけ逆方向にしたい場合などには使えるかもしれないので、一応覚えておくといいと思います。


イベント

2017/10/06(金)
UX School(全10回)