writing-modeを使ってみる

writing-modeを使ってテキストを縦書きにしてみます。

対応ブラウザ

writing-modeの対応ブラウザはこちら
iOSやAndroid、Safariではベンダープレフィックスが必要になります。
IEは独自の実装になっているため、指定方法が少し異なる点注意してください。
　

サンプルコード

writing-modeのhorizontal-tb・vertical-rl・vertical-lrを試してみます。

HTML

<p class="horizontal-tb">難波津に<br />咲くやこの花<br />冬ごもり<br />今は春べと<br />咲くやこの花</p>
<p class="vertical-rl">難波津に<br />咲くやこの花<br />冬ごもり<br />今は春べと<br />咲くやこの花</p>
<p class="vertical-lr">難波津に<br />咲くやこの花<br />冬ごもり<br />今は春べと<br />咲くやこの花</p>

IEには-ms-writing-modeを使って指定します。

CSS

.horizontal-tb {
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}
.vertical-rl {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	height: 100px;
}
.vertical-lr {
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	height: 100px;
}

writing-modeのデモページ

ちなみに縦書きにしたときに高さを設定していないと、IEとedgeで縦書き要素の高さがブラウザの高さ？になってしまうようです。

CSS

.horizontal-tb {
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}
.vertical-rl {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.vertical-lr {
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
}

IEとedgeで高さがおかしくなるデモページ
　

【参考サイト】

• writing-mode – CSS | MDN
• -ms-writing-mode property (Internet Explorer)