ほんっとにはじめての HTML5 と CSS3

今回からしばらく、ライティングモードについて見ていきましょう。

ライティングモードは、W3C の CSS Writing Modes Level 3 でまとめられていて、 テキストの向き（横書き・縦書き・左から右・右から左 など）を指定するためのプロパティ群です。

今回はまず writing-modeプロパティを使ってみます。
writing-modeプロパティは、テキストが「横書き」か「縦書き」か、行の流れが「右から左」か「左から右」かを指定します。
ですので、日本語の縦書き表示もできちゃいます。

このプロパティは、もともと IE の独自仕様だったものが、W3Cの「Writing Modes Level 3」で標準仕様になろうとしています。

そのせいか、IE は「値」が独自仕様のままで、ベンダープレフィックス「-ms-」も付けるそうです。値は記事後半のサンプルコードを御覧ください。（Edgeからは標準仕様に対応）

このプロパティは、ほとんどのブラウザが実装しています。ただし一部のブラウザ（古めの iOS や Androidブラウザなど）はベンダープレフィックス「-webkit-」が必要です。（参考：Can I Use）

writing-modeプロパティによる「縦書き」では、関連プロパティと一緒に使うことが多いです。関連プロパティを数回に渡ってアップします↓

【45-1】日本語の縦書きもできちゃう writing-modeプロパティ　←今日はココ

【45-2】縦書きでの文字の向きを決める text-orientation

【45-3】縦書きで「縦中横」ができる text-combine-uprightプロパティ

参考：
・CSS Writing Modes Level 3 | W3C Candidate Recommendation
・CSS Writing Modes Level 4 | Editor’s Draft
・writing-mode - CSS | MDN

writing-modeプロパティの値

writing-modeプロパティの値はすべてキーワードです。

writing-modeプロパティの値
キーワード	horizontal-tbがデフォルト値。 vertical-rl、vertical-lr、sideways-rl、sideways-lr
グローバル値	text-transform: inherit; 親の値を継承（コレ書かなくても継承するけど） text-transform: initial; 継承した親の値を解消しデフォルト値に戻す text-transform: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	以下を除く、すべての要素 <tbody>、<thead>、<tfoot>、 <colgroup>、<col>、<tr>要素

それぞれのキーワードは、以下の意味があります。

horizontal-tb

デフォルト値です。文字は左から右へ水平に、行は上から下へ垂直方向に流れます。
「horizontal」は水平、「tb」は「top to bottom」の略。

vertical-rl

文字は上から下へ垂直に、行は右から左へ。これが日本語などの縦書き用。
「vertical」は垂直、「rl」は「right to left」の略。

「tb-rl」という値は、SVG では使えますが CSS では非推奨になりました。代わりにこの「vertical-rl」を使うべきなんだそうです。
ただし IE は「-ms-writing-mode: tb-rl」で指定します。

vertical-lr

文字は上から下、行は左から右へ。モンゴル語の書き方だそうです。
「lr」は「left to right」の略。

sideways-rl

行ごと90度回転（3時の方向）して横向きにして垂直に流し、行は右から左へ。
「sideways」は横向きという意味。
（この値は Writing Modes Level 4 で草案中で、対応ブラウザは少数です）

sideways-lr

行ごと -90度回転（9時の方向）して横向きにして垂直に流し、行は左から右へ。
（この値は Writing Modes Level 4 で草案中で、対応ブラウザは少数です）

writing-modeプロパティの指定サンプル

writing-modeプロパティの値を使ってみます。
「sideways-rl」「sideways-lr」は Firefox が対応しています。

下は、Firefox（Mac）でのプレビューです。
デフォルト値での表示は省略。そのほかの4つの値での表示をスクショしました。

「縦書き（vertical-rl や vertical-lr）」では、「全角」のテキストは回転していませんが「半角英数字」は単語ごと回転して横向きになっていますね。
これを1文字ずつ「縦向き」にするには、別のtext-orientationプロパティを使います。
数字などを2〜4文字ひとまとめに「縦向き」にする（「縦中横」と言います）には text-combine-uprightプロパティを使います。
これらは次回から解説します。

上のサンプルのソースコードはこちら。

<div class="mihon">
<b>writing-mode: 未指定（=horizontal-tb）</b>
W3Cのライティングモード レベル３では、３つの値が仕様に入っています。<br>
草案のレベル４では「sideways-rl」「sideways-lr」の２つの値が追加されています。</div>
<div class="mihon v-rl">
<b>writing-mode: vertical-rl</b>（テキスト省略）</div>
<div class="mihon v-lr">
<b>writing-mode: vertical-lr</b>（テキスト省略）</div>
<div class="mihon s-rl">
<b>writing-mode: sideways-rl</b>（テキスト省略）</div>
<div class="mihon s-lr">
<b>writing-mode: sideways-lr</b>（テキスト省略）</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em}
.mihon b {
	display:block;
	color:#579961}
.v-rl, .v-lr, .s-rl, .s-lr {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:20rem; /*高さを指定しないと、折り返しが無いスゴイ縦長なボックスになるので*/
    }
.v-rl {
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl}
.v-lr {
	-ms-writing-mode: tb-lr; /* for IE */
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr}
.s-rl {
	-ms-writing-mode: bt-rl; /* for IE */
	-webkit-writing-mode: sideways-rl;
	writing-mode: sideways-rl}
.s-lr {
	-ms-writing-mode: bt-lr; /* for IE */
	-webkit-writing-mode: sideways-lr;
	writing-mode: sideways-lr}
</style>

writing-modeプロパティの指定は（32〜47行）、それぞれブラウザに合わせて3個ずつ書いています
最初は IE用で、ベンダープレフィックス「-ms-」を付けて、値は古いもの（IE独自仕様）で書きます。
2番目はベンダープレフィックス「-webkit-」を付けたもの。ちょっと古めのブラウザ用ですが、そのうち不要になりそうですね。
最後は標準仕様の書き方。

次回予告

今回のwriting-modeプロパティの「縦向き」モードでは、「半角英数字」は単語ごと回転して横向きになっていますね。
次回は、この「半角英数字」を「1文字ずつ全角にして縦向き」にする text-orientationプロパティを使ってみましょう。

関連記事

• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break
• 【40】文字間の間隔を指定する letter-spacingプロパティ
• 【39】単語間の間隔を指定する word-spacingプロパティ
• 【38】インデント（字下げ）を指定する text-indentプロパティ
• 【37】空白を詰めるかどうか決める white-spaceプロパティ
• 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
• 【35】改行の禁則処理を解除するか決める word-breakプロパティ
• 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
• 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
• 【32】インラインの縦方向の整列を決める vertical-alignプロパティ