HTMLで縦書きは実現できるか – CSSでの実装とライブラリの活用

さまざまな言語表記法をサポートする仕様。
writing-modeプロパティで縦書きを指定できる。

writing-mode: tb-rl; /* IE独自仕様 */
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;

** 注意点

IE5.5以降（ただしプロパティ値が独自）
Google Chrome, Safariは要ベンダープレフィックス
text-decoration:underlineが左側に引かれ、一般的な傍線にならない
※ Opera未確認

** 問題点

Firefoxでは未だ実装されていない
横幅固定のブロック要素でテキスト量に応じた適切な縦幅が確保されない
二点目は分かりにくいので補足して説明する。
通常のウェブサイトでは、ブロック要素の横幅は予め決められていることが大半かと思う。所謂レスポンシブデザインであっても、ブラウザウインドウの横幅以上にはしないはずだ。
ところが、縦書きテキスト量が十分に多い場合、親ブロック要素の左側にはみ出していく。（下図左）

左端まで行が埋まった場合は、ブロックの右端に戻って二段目が始まるというのが、一般的に期待される挙動だろうと思う。そのためには、column-widthプロパティを使って段組みを指定してやる必要があり、これによって確かに左端まで達した次の行は二段目として右端から開始されるようになる。（下図中央）
だが、親ブロックの高さは段組みされたテキスト全体の縦幅に追随してはくれない。そのために、テキストを格納したブロックの次の要素が、テキストと重なったり無駄な空白を取って配置されるなど、うまくレイアウトされないのだ。

かといって、height:autoと設定すると、ブロックの縦幅は中の一文の長さもしくはウインドウ縦幅に依存してしまい、レイアウトしずらくなる。