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のデモページ

writing-mode: horizontal-tb; 横書きで上から下に流れる形で表示。初期値。
writing-mode: vertical-rl; 縦書きで右から左に流れる形で表示。
writing-mode: vertical-lr; 縦書きで左から右に流れる形で表示。

ちなみに縦書きにしたときに高さを設定していないと、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で高さがおかしくなるデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31