縦書きCSSが崩れた事例とその対処

クライアント様のサイト制作中、サイトタイトルを縦書きしようとして以下のスタイルを当てたとき


.site-title {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

こう↓が正しい、やりたいレイアウトなんですけど、

vertical-rl_success

Chromeでだけこう↓なっちゃいまして。

vertical-rl_error

ほかのブラウザだと思った通りになってくれたんですよ。Chrome、しかもPC版でだけでした。崩れちゃったの。

ググってると、こちらの記事を見つけました。

以下、本文中から抜粋させていただきます。

高さの指定は必要

横書きだと暗黙の了解でウインドウ幅に応じて改行されると思いますが、縦書きの場合はこちらが制御しない限りブラウザによって改行する解釈がバラバラっぽいです。

”ブラウザによって改行する解釈がバラバラっぽいです。”

まさに。今回Chromeでだけ、

vertical-rl_error

こう解釈されちゃったんですね。

vertical-rl_height

要素に高さ指定して解決です。

ちなみに事例で挙げさせて頂いたサイトはこちら。ブログ面白いです！良かったら読んでみてください。
遺体の復元・修復・化粧の専門家死化粧師エンゼル佐藤

Share on SNSシェア