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

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


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

下図が正しい、やりたいレイアウトなのですが

Chrome（Mac）でだけこのような表示になってしまいました。

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

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

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

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

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

まさに。今回Chromeでだけ、このように解釈されてしまったようなのです。

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

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか？

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare（スクエア）というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する（Squareを利用）」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。