direction

スタイルシート属性directionは、文書の方向を指定します。英語などは左から右へと文章が流れますが、アラビア語は右から左の向きになります。横書きでの日本語は、昔は右から左、現在は左から右の向きになっています。通常、スタイルシート属性 unicode-bidi と組み合わせて使用します。

書式

direction: direction

属性値

direction
文章の方向を次の値の中から指定します。
意味
ltr 左から右 (left to right)(初期値)
rtl 右から左 (right to left)
inherit 上位のスタイルを継承

unicode-bidi

スタイルシート属性unicode-bidiは、スタイルシート属性 direction を有効にするか否かを指定します。

書式

unicode-bidi: bidi

属性値

bidi
指定できる値を示します。
意味
normal 通常(初期値)
embed 無効
bidi-override 有効
inherit 継承

対応状況

Webブラウザ 対応状況
Chrome Supported
FireFox 3.0 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Supported
Safari 3.2.1 Supported

使用例

次にスタイルシート属性unicode-bidiを使用したHTMLの例を示します。

<p style="direction: rtl; unicode-bidi: normal">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: bidi-override">This is a pen.</p>

This is a pen.

<p style="direction: rtl; unicode-bidi: embed">This is a pen.</p>

This is a pen.

writing-mode

スタイルシート属性 writing-mode は、横書き・縦書きの区別を指定します。

書式

writing-mode: mode

属性

mode
横書き・縦書きの区別を指定します。
意味
lr-tb 横書き
tb-rl 縦書き

対応状況

Webブラウザ 対応状況
Chrome Not supported
FireFox 3.0 Not supported
Internet Explorer 6.0 Supported
Opera 9.62 Not supported
Safari 3.2.1 Not supported

使用例

次にスタイルシート属性 writing-mode を使用したHTMLの例を示します。表示結果はブラウザによって異なることがあります。

<p style="writing-mode:tb-rl">あら楽し<br>思いは晴るる<br>身は捨つる<br>浮世の月に<br>かかる雲なし</p>

あら楽し
思いは晴るる
身は捨つる
浮世の月に
かかる雲なし

ime-mode

スタイルシート属性 ime-mode は、IME(日本語変換)のオン・オフを指定します。 テキストを入力できる項目、つまり <input><textarea> に対して指定します。

書式

ime-mode: mode

属性値

mode
IME(日本語変換)のオン・オフを次の値の中から指定します。
意味
auto 自動(規定値)
active フォーカス移動時にオン
inactive フォーカス移動時にオフ
disable IME使用禁止
inherit 継承

対応状況

Webブラウザ 対応状況
Chrome Not supported
FireFox 2.0 Not supported
FireFox 3.0 Supported
Internet Explorer 6.0 Supported
Opera 9.62 Not supported
Safari 3.2.1 Not supported

使用例と表示サンプル

次にスタイルシート属性ime-modeを使用したHTMLの例を示します。

<form>
  <input type="text" value="active" style="ime-mode: active;">
  <input type="text" value="inactive" style="ime-mode: inactive;">
  <input type="text" value="disable" style="ime-mode: disable;">
</form>

実際の表示サンプルです。各テキスト入力フィールドにフォーカスを合わせると、日本語入力変換IMEがオンになったり、オフになったりします。