cssでの縦書き設定がiphoneで効かないとき

こんにちは茨城県水戸市でホームページ制作・コーディング業務を承っています。フリーランスのレターズです。

今日はcssで縦書き設定してルンルンしていたら、あれ手持ちのiphoneじゃ効いていないなとなりまして。そういえばそうだった思い出し、下記を設定で解決。

Before

<td class="course">ここに縦書きにしたい文字</td>

 .course {
       white-space: pre;
       writing-mode: vertical-rl;
       display: inline-block;
    }

これだと、普通にブラウザではいけるんですが、iphoneではダメでした。

After

<td class="course"><span>ここに縦書きにしたい文字</span></td>

 .course span {
       white-space: pre;
       writing-mode: vertical-rl;
       display: inline-block;
    }

縦書きにした文字をspanで囲って、それにcssをあてることで解決しました。

ちなみに　white-space: pre;　が入っていないと、サファリなどでは意図した高さにならず、途中で改行されたりします。

そしてさらに。。

例えば下記のような時

<h2 class="vertical"><span>縦書き文字縦書きもじ</span></h2>

h2要素に

h2 {
   display:flex;
}

を設定してあげないと、横幅が0pxとして扱われてしまったりします。(Safari,iphoneなどで）

親要素にはflexを設定して、spanで囲った子要素に縦書きのcssを入れてあげる。これがいいかもしれません。