writing-mode | MDN
今回は少し前にCSSの縦書きプロパティを使う機会があったので、使ってみた感想をまとめてみます。
writing-modeの使い方・対応ブラウザ
テキストを縦書きにするのは簡単で下記のCSSを追加するだけです。2017年1月現在ではまだベンダープレフィックスはつけておいた方が良いでしょう。
ちなみにIEはもっと昔に独自対応で縦書きを行っていたため、新しく追加されたものとは別の値になっています。どっちでも良いので値の足並みは揃えてほしいですよね…。
p{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
対応ブラウザは、縦書きにするという指定だけなら通常のブラウザは問題ありません。
writing-modeには他にもいくつか指定出来る値があり、それに関してはまだばらつきがあります。
その他の値についてはこちらをご参照ください。
writing-mode | MDN
使ってみて思ったこと
writing-modeの使い方自体は迷うようなものではなかったのですが、デザインを実現する際にいくつかつまづいた事を書いていこうと思います。
構築していて横書きとの違いを最も感じたのは、テキストの改行でした。
横書きの場合は左から右に文章が続き、widthを指定した幅で改行され二行目にいきます。これが縦書きの場合だと指定の高さに達すると左上に改行されます。
何が問題かというと、文章量によってテキストを入れているボックスの幅を変更、場合によっては高さの変更、段組までしなければならないところです。
横書きのように文章が多くても下に広がっていく場合はスクロールすれば良いですが、左側に広がっていく場合は高さを指定して、ボックスを分けて新聞のような段組を手動で作らなければなりません。個別にそれぞれにCSS当てる（文章変わったら毎回調整）とか更新頻度高いサイトだと流石に辛い。
“なりゆきでボックスを下に伸ばす”という事が出来ないのは中々ハードモードだと思いました。
デザインのアクセントやタイトルなどの短い文言として縦書きを使うのは難しくないですが、長文や文章量の変動が激しい箇所ではあまり縦書きにしない方が賢明な印象です。
小ネタ
小ネタとして、改行を自動のテキスト折り返しでどうにかしようとすると神経使うので、いっそwhite-space: nowrap;をつけて自分が指定した改行以外は折り返さないようにしておくと構築しやすかったです。
それにサイトがレスポンシブ対応の場合は、画面サイズにフォントサイズも連動させる仕様の方が構築しやすいなと感じました。
理由は前述したように、横幅が変化しても下に折り返すことが出来ないからです。ある一定の幅より小さくなると確実に文章が画面左に切れます。画面サイズごとに段組のボックスを分けて対応するとかやりたくありません。
それならフォントサイズと画面幅の比率は常に同じに保ってモバイル用可変レイアウト1種類の構築に済ませた方が良いかなぁと。
電子書籍の普及が進んでいますが、デバイスを使って本を読む人が増えたら縦書きのデザインも増えてくるんでしょうか。
僕も本は好きですから表現としては縦書きも好きですがWebでうまく運用してくにはまだ機能が足りないなぁと思った次第です。
