🖥
HTML + CSS - 基本縦書きにしたいが半角英数字は回転させたくない
概要
CSSで以下プロパティを指定すると文章を縦書きにできる
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl
だが縦書きにした場合、半角アルファベット・半角数字が右に90度回転してしまう
これは「日本語の中に英語が現れた場合、回転して表記する」という意味では正しいのだが、そうしたくない場合もある
この場合、個々の文字を左に90度回転 ( transform: rotate ) させることで、位置を保持できるようだ
例
この例ではかなり文字が詰まった感じがするが、余白は適宜調整する
<div style="writing-mode: vertical-rl; -ms-writing-mode: tb-rl">
ハロー ワ〜ルド ABC012
<span style="display: inline-block; transform: rotate(-90deg)">X</span>
<span style="display: inline-block; transform: rotate(-90deg)">Y</span>
<span style="display: inline-block; transform: rotate(-90deg)">Z</span>
<span style="display: inline-block; transform: rotate(-90deg)">0</span>
<span style="display: inline-block; transform: rotate(-90deg)">1</span>
<span style="display: inline-block; transform: rotate(-90deg)">2</span>
</div>
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
プロフィール・経歴
公開日時
2024-04-03
Discussion