CSSで文字を縦書きにする方法

何も指定しなければ、HTMLで記述した文字列は横書きになります。和風のサイトなどでは、文字を縦書きにしたい時もあるかと思います。

画像を使うという方法もありますが、今回はCSSを使って文字を縦書きにする方法をご紹介したいと思います。

文字を縦書きにするには、writing-modeプロパティを使います。

以下のように指定すれば、p要素が縦書きになります。


p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

逆に以下のように指定すれば、文字は横書きになります。


p {
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
}

横書きの場合は通常は指定する必要はありませんが、PCでは縦書きで、スマホだけ横書きに戻したい場合などに指定します。

文字の向きを変更する

writing-modeプロパティを使って、文字を縦書きにすることができますが、そのままだと英数字の向きが横に倒れてしまいます。

text-orientationプロパティを使うことで、文字の向きを調整できます。以下のように指定すると、英数字も縦向きに表示されます。


p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

text-orientationで指定できる値は、以下の通りです。デフォルトはmixedです。

複数の英数字や記号を1文字分として扱う「縦中横」も実現可能です。

このように、02と14だけが横方向に表示される縦中横を実現するには、text-combine-uprightプロパティを使います。

まずHTML側では、縦中横にしたい部分をspan要素で内包します。

<p><span class="vertical-mid">02</span>丁目<span class="vertical-mid">14</span>番地</p>

CSSでは、以下のように指定します。


.vertical-mid {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

-webkit-text-combineはsafari、-ms-text-combine-horizontalはIE用のプロパティです。

このように指定することで、縦中横が実装できます。

CSSだけでも縦書きが実現できるようになりました。画像を使わなくて良いので、自由度が高まりますよね。

文字を縦書きにしたい時は、ぜひ参考にしてください。