一部文章を縦書きにしたい場合があると思います。今回は例を ありがとう としたいと思います。
縦書きにするCSS
writing-mode: vertical-rl;
＊上記の場合、テキストを右から左に並べます。一般的な日本語の縦書きです。
ちなみにvertical-lrにした場合左から右に並べられます。
しかし、これだとただ９０度回転しただけなため、一般的な縦書きにはまだならないです。
そこで、縦書きにした際に文字を縦にするCSSを追加します。
text-orientation: upright;
*text-orientation の場合ほかに sideways,mixedという値があります。
sidewaysはtext-orientationのプロパティを追加する前と変わらないです。
mixedは英語のみ文字が横のままになります。
これで以下のように文章を縦書きに出来ます。
あ
り
が
と
う