CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets text-orientation property.

text-orientation

　writing-mode に vertical-rl または vertical-lr などの縦書きを指定した場合の文字の表示方向を指定します。Internet Explorerではサポートされていません。

mixed

英語などの横書き文字は90度回転させます。日本語などの縦書き可能文字はそのまま表示します。

mixed
あいうえお

HTML source


<div class="mixed">mixed<br>あいうえお</div>

CSS source


.mixed {
	padding: 1ex;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

sideways

英語などの横書き文字も、日本語などの縦書き可能文字も90度回転させます。

sideways
あいうえお

HTML source


<div class="sideways">sideways<br>あいうえお</div>

CSS source


.sideways {
	padding: 1ex;
	writing-mode: vertical-rl;
	text-orientation: sideways;
}

upright

英語などの横書き文字も、日本語などの縦書き可能文字もそのまま表示します。

upright
あいうえお

HTML source


<div class="upright">upright<br>あいうえお</div>

CSS source


.upright {
	padding: 1ex;
	writing-mode: vertical-rl;
	text-orientation: upright;
}