directionプロパティ

TOPページに戻る > CSS

directionプロパティ

文字や単語の横方向の並べ方を変えるプロパティ
日本語や英語は左から右がが基本値です
アラビア語のように右から左に読む言語もあります
ブラウザは言語で文字方向を判別しているので日本語を右から左に並べ替えるにはunicode-bidiプロパティも同時に使用してください。unicode-bidiプロパティを使えば言語の種類に関係なく、文字方向を並べ替えることができます

使い方（書式）

セレクタ { direction: 値;  }                                    

directionプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
ltr	左から右に文字の表示方向を変更
rtl	右から左に文字の表示方向を変更 ※日本語や英語などの表示方向を右から左に変更する時はunicode-bidiプロパティも同時に使用

実際の指定方法

.hoge { direction: rtl;  }   /* 左から右に文字の表示方向を変更 */

.hoge2 { 
 direction: ltr;              /* 右から左に文字の表示方向を変更 */
 unicode-bidi: bidi-override; /* 文字コードの方向を上書きします */
 }

html部分

<p class="hoge">左から右に文字の表示方向を変更</p>
<p class="hoge2">右から左に文字の表示方向を変更</p>

実際の表示

左から右に文字の表示方向を変更

右から左に文字の表示方向を変更