CSSでの実装
CSS Writing Modes Level 3
さまざまな言語表記法をサポートする仕様。
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と設定すると、ブロックの縦幅は中の一文の長さもしくはウインドウ縦幅に依存してしまい、レイアウトしずらくなる。（下図右）
2014/02/26 文章だけでは分かりづらいので図を挿入した。
JavaScriptライブラリでの実装
h2v.js
一行ごとに、一文字分だけの横幅を持つ縦長のブロックに分割して、縦書きを実装。
- ルビ、段組みに対応
- 行の右側に傍線が引ける
- 非営利利用であれば無償、それ以外は有償ライセンス
デメリット
- 回り込み(float)に対応していない
竹取.js
writing-modeプロパティが有効なブラウザはCSSを使用し、
それ以外のブラウザはtransform:rotateでテキスト全体および一文字ずつを回転させて縦書きを実装。
- Adobe Musa CC に搭載されている
- ルビ、段組みに対応
- 回り込みにも対応
- MITライセンス
デメリット
- firefoxで余白が出てしまう
nehan.js
一文字ごとに<br>で区切って実装している
- ルビ、段組みに対応
- 回り込みにも対応
- ページ切り替え機能がつけられる
- 縦書きと横書きを共存させてレイアウトできる
- MITライセンス
デメリット
- ページ内検索ができない
所感
テキスト量が決まっていて、全ブラウザで縦書き表現できなくても良いのであれば、CSSでの実装でも良いかもしれないが、現時点ではライブラリを利用した方が無難。
ライブラリを利用すれば思いのほか手軽に実装できる。