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

■ 概要

項　　目説　　明
記述形式 セレクタ {writing-mode: 値 }
値 の形式 horizontal-tb，vertical-rl，vertical-lr
初 期 値 horizontal-tb
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 テーブルの行の組，列の組，行，列 を除く，すべての要素
継　　承 する

■ 解説

writing-mode プロパティ は，縦書き・横書きの別と行ブロックを並べる方向 を指定します。

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

値説　　明
horizontal-tb 横書きにして，上から下へ行ブロックを並べます。　（初期値）
vertical-rl 縦書きにして，右から左へ行ブロックを並べます。
vertical-lr 縦書きにして，左から右へ行ブロックを並べます。
備　　考 日本語の縦書きでは，vertical-rl を指定します。

元々，「縦書き」のサポートは，Microsoft が IE の独自拡張仕様として策定したものが存在しておりました。　また，上の writing-mode プロパティ の仕様は基本的に後になって Googole の Chrome で採用されたものに基づいています。

すでに，W3C の CSS Writing Modes Level 3 の勧告候補 がリリースされていますが，主要ブラウザーでの対応が進まないのは，Microsoft が独自仕様に固執していることも原因になっているのかもしれません

■ 使用例（ text-orientation プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!--
   div.sample {
      margin: 20px;
      padding: 10px;
      border: solid 1px #808080;
      float: left;
   }
   .vert1 { writing-mode: vertical-rl; }
   .vert2 { writing-mode: vertical-lr; }
   .vert3 {
      -ms-writing-mode: tb-rl;            /* IE用　*/
      -webkit-writing-mode: vertical-rl;  /* chrome用　*/
      -o-writing-mode: vertical-rl;       /* opera用　*/
      writing-mode: vertical-rl;
   }
   .vert4 {
      -ms-writing-mode: tb-lr;            /* IE用　*/
      -webkit-writing-mode: vertical-lr;  /* chrome用　*/
      -o-writing-mode: vertical-lr;       /* opera用　*/
      writing-mode: vertical-lr;
   }
-->
</style>
HTML
<body> ～ </body>		 
<div class="sample vert1">
   一行目です。<br />
   二行目です。<br />
   三行目です。<br />
   四行目です。<br />
   五行目です。<br />
</div>
<div class="sample vert2">
   一行目です。<br />
   二行目です。<br />
   三行目です。<br />
   四行目です。<br />
   五行目です。<br />
</div>
<div class="sample vert3">
   一行目です。<br />
   二行目です。<br />
   三行目です。<br />
   四行目です。<br />
   五行目です。<br />
</div>
<div class="sample vert4">
   一行目です。<br />
   二行目です。<br />
   三行目です。<br />
   四行目です。<br />
   五行目です。<br />
</div>

ブラウザー 表示例　（FireFoxは未対応のため正しく表示されません）
一行目です。
二行目です。
三行目です。
四行目です。
五行目です。
一行目です。
二行目です。
三行目です。
四行目です。
五行目です。
一行目です。
二行目です。
三行目です。
四行目です。
五行目です。
一行目です。
二行目です。
三行目です。
四行目です。
五行目です。

本リファレンスの CSS プロパティのマークアップの例は，基本的に ベンダープレフィックス（接頭辞） を追加しない形のものを示してあります。　（それが正しいマークアップと考えています。）

この writing-mode プロパティ は，この例に示したとおり，ベンダープレフィックスを付けないとどのブラウザーでも正しく表示できません。　ですので，あえてベンダープレフィックスを付けた形のものも示してあります。

■ 備考

【参考ページ】