CSS3: direction プロパティ - 文字表記の方向

■ 概要

項　　目説　　明
記述形式 セレクタ {direction: 値 }
値 の形式 ltr，rtl
初 期 値 ltr
対応ブラウザー C2+ / e5+ / N6+ / Fx1+ / Op9.2+ / Ch2+ / Sa1.3+
適用可能な要素 すべての要素
継　　承 する

■ 解説

direction プロパティ は，文字表記の方向 を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
ltr 左から右へ表示します。　（初期値）
rtl 右から左へ表示します。
備　　考 インライン要素で rtl の指定を有効にするためには unicode-bidi プロパティの値をnormal 以外に指定する必要があります。

■ 使用例（ direction プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample {
      margin: 10px auto;
      width: 30em;
      border: 2px solid gray;
      padding: 5px;
   }
   .dir1 {
      direction: ltr;
      unicode-bidi: bidi-override;
   }
   .dir2 {
      direction: rtl;
      unicode-bidi: bidi-override;
   }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample dir1">あいうえおかきくけこさしすせそ　　(左→右)</div>
<div class="sample dir2">あいうえおかきくけこさしすせそ　　(右←左)</div>

ブラウザー 表示例
あいうえおかきくけこさしすせそ　　(左→右)
あいうえおかきくけこさしすせそ　　(右←左)

■ 備考

【参考ページ】