CSSでテキストを縦書きデザインにする方法

Webサイトでは基本的にテキストは横書きですが、CSSだけで縦書きにすることもできます。

日本の本などは元々縦書きですし、テキストを縦書きにすることで和風デザインを演出できるなど、Webデザインの幅も広がります。

ただ単に縦書きにすればいいというわけでもなく、日本語や英語、数字などの向きなども調整する必要があります。

テキストを縦書きにする

まず、CSSでテキストを縦書きするには「writing-mode」というプロパティを使うのですが、以下のような指定ができます。

verticalが縦書きで、rlは右から左（Right to Left）、lrは左から右（Left to Right）という意味で覚えておけばOKです。

実際に縦書きを実装したのが以下の例です。

See the Pen
css 縦書き by KUBO (@KUBOGEN)
on CodePen.

IE用に「-ms-」というベンダープレフィックスをつけた記述も必要です。

文字の表示方向を指定する

次に文字の表示方向について。先ほどの例だと縦書きにはなっていますが、文字の方向は横向きのものもあれば、縦向きのものがあります。

基本的には日本語は縦で、英数字は横向きになっていますが、それらの文字の表示方向は、「text-orientation」プロパティを使って指定することが可能です。（ただし、IEでは未対応のプロパティです。）

指定できるのは以下の通り。

mixedがデフォルトの値で、日本語は縦、英数字は横向きで表示されます。uprightを指定すると、日本語も英数字も縦向きになり、sidewaysを指定すると、日本語も英数字も横向きになります。

実際に指定したのが以下の例です。

See the Pen
YzWLqOG by KUBO (@KUBOGEN)
on CodePen.

残念ながらIEには対応していませんが、Safari用に「-webkit-」のベンダープレフィックスは指定しておきましょう。

英数字の向き

最後に英数字の向きについてです。「text-combine-upright」プロパティを使うことで、2文字の数字を1文字分の幅として縦向きに表示することが可能です。

See the Pen
text-combine by KUBO (@KUBOGEN)
on CodePen.

1文字分として表示したい部分をspanタグなどで囲って、「text-combine-upright」を実装すればいいのですが、ブラウザによって記述方法が違うので注意してください。

まとめ

CSSでテキストを縦書きにするには、writing-modeを使い、text-orientationやtext-combine-uprightなどで文字の表示方向を調整します。

ただ、ブラウザによってプロパティが対応していなかったり、記述方法が違うかったりするので、縦書きデザインをCSSで実装する場合は、そのあたりに注意しながら実装する必要がありそうです。