文章を一部縦書きにしたい。

一部文章を縦書きにしたい場合があると思います。今回は例を　ありがとう　としたいと思います。

縦書きにするCSS

writing-mode: vertical-rl;

＊上記の場合、テキストを右から左に並べます。一般的な日本語の縦書きです。
ちなみにvertical-lrにした場合左から右に並べられます。

しかし、これだとただ９０度回転しただけなため、一般的な縦書きにはまだならないです。
そこで、縦書きにした際に文字を縦にするCSSを追加します。

text-orientation: upright;

*text-orientation　の場合ほかに　sideways,mixedという値があります。
sidewaysはtext-orientationのプロパティを追加する前と変わらないです。
mixedは英語のみ文字が横のままになります。

これで以下のように文章を縦書きに出来ます。

あ
り
が
と
う