CSSでテキストを縦書きにする方法

2024.04.09
HTML&CSS

CSSで横書きのテキストを、縦書きに変更する方法の備忘録です。

縦書きのテキストは、主にwriting-modeとtext-orientationの２つのプロパティを設定することで実装できます。

writing-modeを設定する

writing-modeプロパティは、テキストの行のレイアウトを横書きにするか縦書きにするか、またコンテンツが左右どちらに流れていくのかを設定することが出来ます。

例えば、通常は横書きで表紙されているテキストは「vertical-rl」を設定することで、縦書きの文章に変更できます。

<p>縦書きの文章</p>

p {
  writing-mode: vertical-rl;
}

縦書きの文章

「writing-mode: vertical-rl;」を設定した<p>タグのテキストが縦書きになりました。

文章を縦書きにする

上記のようにwriting-mode: vertical-rlを設定すると、複数行の文章も縦書きで表示されます。

<p>
  山路を登りながら、こう考えた。<br>
  智に働けば角が立つ。<br>
  情に棹させば流される。<br>
  意地を通せば窮屈だ。<br>
  とかくに人の世は住みにくい。<br>
  住みにくさが高じると、安い所へ引き越したくなる。<br>
  どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
</p>

山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

writing-mode: vertical-rlを設定して複数行の文章を縦書きにした場合、テキストは右から左へ流れます。

「vertical-rl」の「rl」の部分は、「Right to Left」を省略したもので、文章を「右から左」へ行を並べることを意味しています。

テキストの流れを逆にする

テキストを左から右へ変更したい場合は、writing-mode: vertical-rlを設定します。

p {
  writing-mode: vertical-rl;
}

テキストが左から右へ読み進める並びになりました。

英数字を縦書きにする

writing-mode: vertical-rlの設定だけでは、英数字は横向きの縦書きになります。

<p>
　　縦書きの文章<br>
　　SAMPLE<br>
　　0123456789
</p>

縦書きの文章
SAMPLE
0123456789

英数字も縦に並べたい場合は、text-orientationプロパティを設定します。

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

縦書きの文章
SAMPLE
0123456789

text-orientation: uprightを指定すると、すべての文字を90度回転させて縦書きにすることが出来ます。

横向きの縦書きにする

同様にtext-orientation: sidewaysで、文章全体を横向きの縦書きにすることも可能です。

p {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

横向き縦書きの文章
SAMPLE
0123456789

文章の文字全体が横向きの縦書きになりました。