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

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

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

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

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

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

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

HPcodeさま『日本語の縦書きサイトで使うCSSプロパティと注意点』

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

高さの指定は必要

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

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

まさに。今回Chromeでだけ、

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

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

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

挫折しないWeb制作学習ならデイトラがお勧めです

詳細は下記バナーをクリックして、公式サイトを覗いてみてください。