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

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

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

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

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

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

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

右から左の場合(rtl)

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

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

左から右の場合(ltr)

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

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

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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集