縦書き・横書きを指定するには?
要素書式
writing-mode : 【書記方向】 ;
対応ブラウザ
- IE 9：○(-ms-writing-mode / writing-mode でもよいが実装は独自)
- Firefox 10.0：×
- Opera 11.61：×
- Chrome 17.0：○(-webkit-writing-mode)
- Safari 5.1：○(-webkit-writing-mode)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
以下はIEの実装です。
| 値 | 内容 |
| lr-tb | 行内のテキストは左から右へ進み、行は上から下へ進む。横書き。英語などの方式。 |
| lr-bt | 行内のテキストは左から右へ進み、行は下から上へ進む。横書き。 |
| rl-tb | 行内のテキストは右から左へ進み、行は上から下へ進む。横書き。アラビア語などの方式。 |
| rl-bt | 行内のテキストは右から左へ進み、行は下から上へ進む。横書き。 |
| tb-lr | 行内のテキストは上から下へ進み、行は左から右へ進む。縦書き。モンゴル語などの方式。 |
| tb-rl | 行内のテキストは上から下へ進み、行は右から左へ進む。縦書き。日本語などの方式。 |
| bt-lr | 行内のテキストは下から上へ進み、行は左から右へ進む。縦書き。 |
| bt-rl | 行内のテキストは下から上へ進み、行は右から左へ進む。縦書き。 |
| lr | lr-tbと同じ。 |
| rl | rl-tbと同じ。 |
| tb | tb-rlと同じ。 |
以下は策定中の標準仕様で、現在のところ、Chrome、Safari(-webkit-writing-mode)が実装しています。
| 値 | 内容 |
| horizontal-tb | 行内のテキストは横に進み、行は上から下に進む。横書き。
行内のテキストの左右の方向はdirectionプロパティによって指定する。 |
| vertical-rl | 行内のテキストは縦に進み、行は右から左に進む。縦書き。
行内のテキストの方向はdirectionプロパティによって指定する。 |
| vertical-lr | 行内のテキストは縦に進み、行は左から右に進む。縦書き。
行内のテキストの方向はdirectionプロパティによって指定する。 |
解説文
writing-modeプロパティは、縦書き、横書きなどの文字の書記方向を指定します。
writing-modeプロパティはIEの独自実装が先行した経緯があり、IEではベンダープレフィックスなしで指定することもできますが、その場合でも指定する値はIE独自のものです。
それに対して、標準規格は現在、策定中であるということもあり、Chrome、Safari（-webkit-writing-mode）のみが実装しています。また、これらのブラウザではベンダープレフィックス付きで指定する必要があります。
IEで指定する場合、値はハイフンを挟んで二つの部分に分かれます。前半部分は、行内のテキストの進行方向を表し、後半部分は、行の進行方向を表します。右から左は「rl」、左から右は「lr」、上から下は「tb」、下から上は「bt」となります。（「r」、「l」、 「t」、 「b」はそれぞれ「right」、「left」、「top」、「bottom」の頭文字です ）
たとえば、通常の英文などの横書きは、テキストが左から右で、行が上から下なので「lr-tb」になります。同じように、日本語の縦書きはテキストが上から下で、行が右から左なので、「tb-rl」になります。
以下の例ではIEで縦書きを指定しています。
-ms-writing-mode: tb-rl;
Chrome、Safari(-webkit-writing-mode)が実装している現時点での標準仕様による指定方法では、値がハイフンで前半後半に分かれることと、後半の指定の意味は同じですが、前半の指定が異なります。
横書きの場合、前半分に「horizontal」を指定し、実際の左右の方向は、directionプロパティ（値が「rtl」なら右から左、「ltr」なら左から右）で指定します。また、後半部分は上から下の「tb」のみがサポートされます。下から上への行の進行はサポートされていません。
縦書きの場合、前半部分に「vertical」を指定します。テキストの進行方向は、directionプロパティで指定した左右の方向が、左側を下にするように時計回りに９０度回転した形で解釈されます。
たとえば、「vertical-rl」の場合、縦書きで行は右から左へと進行していきます。この時、directionプロパティが「ltr」なら、テキストは上から下への進行になります。
以下の例では右から左に進み、行は上から下に進む横書き（アラビア語など）を指定しています。
direction:rtl;
-webkit-writing-mode: horizontal-tb;
どちらの実装でも、テキストの進行方向の指定は、既定では、文字列の配置（右寄せ、左寄せ）にのみ効果を持ち、文字の順序には効果を持ちません。文字単位での既定の書字方向は、Unicodeの場合は文字種ごとに決められています。
既定で左から右へ描かれる言語の文字を、右から左へ表示されるように指定しても、文字単位で右から左に表示されるわけではなく、左から右に書かれた文章が右寄せで表示され、左側で改行が発生するようになるだけです。
文字単位での表示順序を操作するためには、unicode-bidiプロパティを指定して、既定の書字方向の変更を許可（値「bidi-override」を指定）する必要があります。
なお、重要な違いとして、IEでは縦書きを指定しても、文字種から判断して日本語などの縦書きする言語だった場合は、文字の向きは横書きと同じ（文字の上下と画面の上下が同じ）になりますが、Chrome、Safariの場合は、縦書きを指定すると一律に横に回転（画面の左側が文字の下になる）して表示されます。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
float:left;
width:200px;
height:200px;
margin-left:50px;
border:solid 1px silver;
}
/* 縦書きの指定 */
#box1 {
-ms-writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
direction:ltr;
}
/* 右寄せの横書きの指定 */
#box2 {
-ms-writing-mode:rl-tb;
-webkit-writing-mode:horizontal-tb;
direction:rtl;
}
/* 文字の書記方向も含めて右から左に進む横書きの指定 */
#box3 {
-ms-writing-mode:rl-tb;
-webkit-writing-mode:horizontal-tb;
direction:rtl;
unicode-bidi:bidi-override;
}
</style>
</head>
<body>
<p id="box1" class="box">
縦書き<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Duis ac massa risus, sit amet commodo metus. <br>
Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis.
Morbi quis libero id nulla lacinia placerat. </p>
<p id="box2" class="box">
右から左の横書き<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Duis ac massa risus, sit amet commodo metus. <br>
Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis.
Morbi quis libero id nulla lacinia placerat. </p>
<p id="box3" class="box">
文字も右から左の横書き<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Duis ac massa risus, sit amet commodo metus. <br>
Donec eu ante ipsum. Mauris vitae nunc tellus, ut posuere turpis.
Morbi quis libero id nulla lacinia placerat. </p>
</body>
</html>
関連項目
（関連項目はありません）
