縦書きの基本(wrinting-mode)

      2016/03/21

縦書きの基本(wrinting-mode)

縦書き表示をするためのcss指定の基本となるのがwriting-modeです。これは「CSS Writing Modes Level 3」という仕様で定められています。

wrinting-mode

writing-modeプロパティで指定する値は、

意味
horizontal-tb 横書きで、コンテンツは上から下に並ぶ
vertical-rl 縦書きで、コンテンツは右から左に並ぶ
vertical-lr 縦書きで、コンテンツは左から右に並ぶ
sideways-rl 縦書きで、コンテンツは右から左に並ぶ、ただし文字は回転して表示
sideways-lr 縦書きで、コンテンツは左から右に並ぶ、ただし文字は回転して表示

が規定されています(2015年12月15日付 W3C勧告候補)。このうち日本語の縦書きとしては「vertical-rl」を使用します。指定しない場合は「horizontal-tb」となります。

縦書き表示のサンプル

See the Pen 縦書きサンプル01 by overprint (@overprint) on CodePen.

どの部分に指定するか

writing-modeプロパティは、html内のどの要素に指定することもできます(ただし,表のrowgroup、columngroup、row、column、およびruby基底コンテナ、ruby注釈コンテナを除く)。

ページ全体を縦書き表示にするのであればhtmlとかbody要素に「writing-mode:vertical-rl」を指定するのが簡単でしょう。

See the Pen 縦書きサンプル01 by overprint (@overprint) on CodePen.

一部だけ縦書きにしたい場合は、その部分に「writing-mode:vertical-rl」を指定すればよいです。

See the Pen 縦書きサンプル02 by overprint (@overprint) on CodePen.

上のサンプルは、枕草子の文章を#textで囲って、その部分を縦書き指定(writing-mode:vertical-rl)しています。それでは次のサンプルはどうでしょう。

See the Pen 縦書きサンプル03 by overprint (@overprint) on CodePen.

これは各段落(p要素の各id)に縦書き指定(writing-mode:vertical-rl)をしています。段落同士がくっついているのでわかりづらいかもしれませんが、各段落が下に並んでいます。これはp要素の親(div#text)はwriting-modeの指定をしていないので、デフォルトの「horizontal-tb」となり、その中のコンテンツは上から下に並びます(各段落は左揃え)。

このように、どこにwriting-modeを指定するかによって表示が変わりますので、その点は注意してください。

表示領域

縦書きの場合、その領域にwidth,heightの指定がない場合は、行の高さは親要素の高さ(指定がない場合はブラウザの表示領域の高さ)になります。つまりテキスト量が増えると横方向に増えていくことになります。

下記のサンプルはそれぞれ領域にwidthやheight指定をしたものです。わかりやすいように領域に背景色をつけましたが、テキストが収まりきらないものは横方向にあふれています。
(ちなみにwidth:4emで4行分になっていないのは行間が含まれているからです)

See the Pen 縦書きサンプル04 by overprint (@overprint) on CodePen.

参考

 - css