CSSで縦書きwriting-mode
codepenデモ
CSSの writing-mode を使うことで、
テキストの行のレイアウトを横書きにするか縦書きにするか
ブロックのフロー方向を左向きにするか右向きにするか
を設定することができます。
参考画像
https://gyazo.com/941457bd50b8583d1ed0fcb9af5d3625
/icons/hr.icon
プロパティの解説
code:html
<p class="nlt">テスト</p>
<style>
.nlt {
writing-mode: vertical-rl;
}
</style>
値としては、horizontal-tb 、vertical-rl、vertical-lr、 sideways-rl 、sideways-lr の5つがあります。
また、これらの値は言語がrtl（左から右）、ltr（右から左、ヘブライ語やアラビア語）で挙動が変わります。
sideways-rl 、sideways-lrの2つは、firefoxでのみ対応しています。
horizontal-tb
ltr の言語では、コンテンツは左から右へ水平に流れます。
rtl の言語では、コンテンツは右から左へ水平に流れます。
次の水平の行は、前の行の下に配置されます。
vertical-rl
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。
rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
vertical-lr
ltr の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。
rtl の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
sideways-rl
ltr の言語では、コンテンツは下から上へ垂直に流れます。
rtl の言語では、コンテンツは上から下へ垂直に流れます。
垂直方向に並べられる書体を含むすべての文字を右へ横倒しにします。
sideways-lr
ltr の言語では、コンテンツは上から下へ垂直に流れます。
rtl の言語では、コンテンツは下から上へ垂直に流れます。
垂直方向に並べられる書体を含むすべての文字を左へ横倒しにします。
/icons/hr.icon