IEでwriting-mode: vertical-rlを指定しても縦書きにならない

こんにちは、Ryohei（@ityryohei）です！

本記事では、IE…正確にはIE11でwriting-mode: vertical-rlを指定しても縦書きにならない場合の対処法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

結論：IE用の値を指定する必要がある

IEでもwriting-modeを使うことはできますが、IE用の値を指定してプロパティの頭に-ms-のベンダープレフィックスを付けてあげる必要があります。ベンダープレフィックスを付けた後のプロパティは下記のようになります。

//モダンブラウザ
writing-mode: 値;

//IE
-ms-writing-mode: 値; 

上記のベンダープレフィックスを付けて、かつテキストを縦書きで表示するIE用の値を指定します。指定する値は下記の通りです。

モダンブラウザ	IE	説明
vertical-rl	tb-rl	テキストを縦書きにして、右から左に表示する
vertical-lr	tb-lr	テキストを縦書きにして、左から右に表示する

こうすることでIEでもテキストが縦書きで表示されるようになります。

IEでテキストを縦書き表示する

前項でご紹介した内容を参考にIEでテキストを縦書きに表示するCSSを作成してみましょう。テキストは右から左に表示するので、値はtb-rlですね！

HTML

<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

CSS

p {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

上記のデモがこちら！

See the Pen IE writing mode vertical by ryohei (@intotheprogram) on CodePen.

ちゃんと縦書きになっています。これで問題解決ですね！

ちなみにIEだけに縦書きを設定したい場合はメディアクエリを指定して下記のようにする手もあります。

@media all and (-ms-high-contrast: none){
    p {
        -ms-writing-mode: tb-rl;
    }
}

参考までに！

最後に

MicrosoftのOffice365がIE11のサポートを終了する2021年8月まで半年を切りました。多くの企業がOffice365を業務で使用しているため、サポートが終了となるとIE11から他ブラウザ（ChromeやEdge）への移行が急速に進むのではないかと思います。

Web制作会社に関してもIE11をサポート対象から外す、もしくは有償対応とする企業が増えてきたように思います。私が勤めている会社はまだサポート対象に含めていますが、これから変わるだろうと思います。サポートから外すといっても完全に対応しなくていいという意味にはならないですが、いざというときに切り捨てることができる選択ができるのはいいですよね！今後の動向が楽しみです！

そういえば最近、記事の締めに書いている「最後に」がまったく本題と関係ない内容になってる気がする……まぁいっか?

以上、IEでwriting-mode: vertical-rlを指定しても縦書きにならない場合の対処法のご紹介でした！