縦書きの時の英文字・数字の向きを調整します。

1文字ずつ縦向きにする

DEMO

この文章はダミー(Dummy)です。
2024年12月に作成しました。

HTML

<p class="copy1">
	この文章はダミー(Dummy)です。<br>2024年12月に作成しました。
</p>

CSS

.copy1 {
	text-orientation: upright;
	writing-mode: vertical-rl;
	max-height: 200px;
}

1単語ずつ縦向きにする

単語が長い場合は文字が長体になり読みにくいです。

DEMO

この文章はダミー(Dummy)です。
202412月に作成しました。

HTML

<p class="copy2">
	この文章はダミー(<span class="copy2-upright">Dummy</span>)です。<br>
	<span class="copy2-upright">2024</span>年<span class="copy2-upright">12</span>月に作成しました。
</p>

CSS

.copy2 {
	max-height: 200px;
	text-orientation: mixed;
	writing-mode: vertical-rl;
}
.copy2-upright {
	line-height: 1;
	text-combine-upright: all;
}