2017/04/06
ずーと以前は、文字幅と同じ列幅のテーブルで無理やり縦書きを実装していた気がしますが、きちんとCSSで実現できるようになっています。ちちゃいもじ（促音）の位置がいまいちのような気がしますが仕方ないのですかね。
おそらく書体に登録されている文字が下に配置されているのでしょうね。
むかし、むかし、あるところに
おじいさんとおばあさんがいました。
おばあさんは川へ洗濯に、おじいさんは山へ芝刈りに行きました。
おばあさんが川で洗濯していると、大きな桃が、どんぶらこ、どんぶらこ、と流れてきました。おばあさんはその大きな桃をひろいあげました。
すると、おばあさんはその桃をむしゃむしゃと食べ始めました。
桃の実をあらかた平らげると空腹が満たされ、おじいさんの分が残っていないことに気づきました。
なかったことにしました。
かつて大きかった桃の、残りかすが、どんぶらこ、どんぶらこと流れていきました。
のような感じで縦書きが簡単に実装できます。少し文字間隔がきになりますがかなりいい感じです。微調整やらなにかはおいおい追及できればと思います。
HTML <div class="vertical"> <p>むかし、むかし、あるところに<br /> おじいさんとおばあさんがいました。</p> </div>
ページ全体を縦書きにする場合はbody要素に直接CSSを聞かせれば大丈夫だと思います。
CSS
.vertical{
writing-mode:vertical-rl;
height:400px;
}
.vertical p{
text-align:justify;
line-height:2;
}
writing-modeというCSSを使います。
horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr のうちのいずれかを設定することができます。
何も設定していなけばhorizontal-tbで横書きになります。vertical-rl とvertical-lr が縦書きです。vertical-rlが縦書きで右から左に向かって文章が続いていきます。vertical-lr はその反対です。まあ、ちょっと読みにくくていけません。
sideways-rlとsideways-lr は、縦書きなんですが文字が横置きになって左始まりか、右始まりかの違いです。ちょっと気持ち悪いです。
設定はこれだけでいいのですが私の環境のFirefoxでは高さを設定しておかないとブラウザの高さを超えると折り返してくれるのですが、少しの分縦スクロールバーが表示されてしまいます。chromeでは縦スクロールバーは表示されませんでした。
また、縦書きの下のそろえがガタガタになるのでtext-align:justify;で両端ぞろえにしておきましょう。さらに行間が狭いのでline-heightを使って任意の行間を設定しておいてください。
ちなみにwriting-modeのブラウザの対応状況は
IEはいち早く縦書きを実装していたそうですが、標準仕様とは少し違うようです。
スマホに対して縦書きはちょっと読みにくい気がしますがヘッダーフッターを除いた部分のみ横スクロールしていけば面白いかもしれません。OperaMiniが対応していないようですが。
