CSSで縦書きを実装した話

公開
更新

つい最近のこと、おそらく初めて和風のサイトを実装することになりました。そのサイトのビジュアルデザインを見ると、縦書きになっている部分がありました。「これは画像にして貼るしかないのかなぁ」と思いつつも、CSS Writing Modes Level 3を参考に各ブラウザのレンダリング状況をテストしてみると、予想外にもFirefox以外のブラウザは全て縦書きのレンダリングが可能でした。アクセス解析でどのくらいFirefoxユーザーが来るかを予想してみると、よく来ても2%という結果（ちなみに僕はFirefox派ですが）。そこで、今回はCSSで縦書きを実装することに決めました。

原稿に半角英数字がなかったこともあり割とすんなり出来たのですが、気付いたことをメモしておくことにします。縦書きの話は既に色々出ているかもしれませんが...。

（2015年1月22日追記）Firefox Developer EditionやFirefox Nightly Buildsでは、about:configでlayout.css.vertical-text.enabledをtrueにすることにより、縦書き表示が有効となります。

（2015年6月3日追記）MDNで確認すると、Firefox 39(Nightly and DevTools editions)からabout:configでlayout.css.vertical-text.enabledの設定値がtrueになるようです。Firefox Developer EditionやFirefox Nightly Buildsにおいて、about:configでlayout.css.vertical-text.enabledを確認すると、初期値でもtrueになっており、縦書きでレンダリングすることが確認できます。

（2015年9月23日追記）Firefox 41から標準で縦書き文章のレイアウト機能が有効となりました。

縦書きの設定方法

-moz-等も一応書いておきました。IEはバージョン11でも2行目の記述が有効でした。

.mod-verticaltxt{
 writing-mode: tb-rl;
 -moz-writing-mode: vertical-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
}

よりきれいに表示するためには

文章をよく見ると、各行の下端がばらついてきれいでないことに気付きました。そこで、次のように均等割り付けを設定してみたところ、とてもきれいに見えるようになりました。

p{
 text-align: justify;
 text-justify: inter-ideograph;
}

縦書き未対応のFirefoxへの対応

縦書き未対応のFirefoxには、横書きできれいにレイアウトしたものを表示させようと考え、Designing in the Browserで作っていきました。その際、縦書きに対応しているか否かを判別する必要が出たため、Modernizrの利用を検討しました。ただ、標準ではwriting-modeの機能検出は用意されていないため、ExtensibilityのところにあるModernizr.testAllProps()を利用して検出し、writing-modeプロパティ対応の場合はhtml要素にclass名を付与することにしました。

if (Modernizr.testAllProps('writingMode')) {
 document.getElementsByTagName("html")[0].className = "writing-mode";
}

ちなみに、他にModernizrを使うことがなければ、Modernizr.testAllProps()の利用に必須なものだけを選択してGenerateすることをおすすめします（無駄に機能検出を行ってパフォーマンスを落とすのはもったいないなと）。

CSSは、最初に横書きレイアウトを設定し、その後縦書きレイアウトに必要な設定を上書きしていくようにしました。ただし、それだと面倒な場合もあるので、臨機応変に対応することをおすすめします。

.mod-text-01{
 // 横書きレイアウト・縦横共通のレイアウトの設定
 // do something...

 .writing-mode &{
 // 縦書きレイアウトの設定
 // 上下方向のmarginを左右に変えるとか...
 p{
 text-indent: 1em;
 text-align: justify;
 text-justify: inter-ideograph;
 }
 }
}

CSSで縦書きを実装して良かった点

  • 画像を作成する必要がなくなった。よってHTTPリクエストや転送量も減らすことができた。
  • メンテナンスが非常に楽だった（Photoshopを開く必要も無いし、画像テキストだけ修正して代替テキストを修正し忘れたといったことがない）。
  • Retinaディスプレイでもきっと鮮明に見えているはず。

サンプル

JSFiddleに掲載しています。