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オープンチャットもご利用ください。

プロフィール・経歴