《CSS》縦書きの英数字の向きを調整する
公開日:2024年12月10日 最終更新日:2024年12月10日
縦書きの時の英文字・数字の向きを調整します。
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)です。
2024年12月に作成しました。
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;
}