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

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


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

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

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

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

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

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

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

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

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

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

Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。

決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。

当事務所で導入しているのがSquare（スクエア）。

導入は無料で、コストはクレジット決済手数料（3%）のみ。

毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。

制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。

非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。