IEとwebkit系など、CSSのプロパティで縦組みに対応しているブラウザと、firefoxのように対応していないブラウザがある。
対応していても縦組みにはバグがつきもので、句読点の位置やらなんやら色々。
CSSも
-webkit-writing-mode:vertical-rl; writing-mode:tb-rl;
とか実装できるブラウザでも書き方が違う。
で、CSSで実装できないFirefoxや、その他いくつかの不具合を調整した竹取JSというjavascriptの変換プラグインがある。
ブラウザによって実装方法を分岐して縦組みを実現してくれて、Firefoxなんかは
<span>た</span> <span>と</span> <span>え</span> <span>ば</span> <span>。</span>
というように一文字人文字spanで囲って縦組みを実現するというかなりの力技プログラム。
竹取JS以外にもいくつか縦組みプログラムがあるけど、たぶん竹取JSが一番安定している。
それでも完璧には正直遠い感じ。
他のjavascriptプラグインとよく干渉して調整が大変だし工数は増える一方...
でも、これが今のところ一番良いかと。
上手く使えば、許容範囲内で縦組みがデザインに組み込めて割とうれしい。
だけど、一つどうにもならない問題が。
実装後テストを終えて完了と思いきや思わぬ落とし穴で、
実はChrome最新版(バージョン 26.0.1410.65)において、
MacbookProのRetina Displayで縦組み「-webkit-writing-mode」で消えるという致命的なバグが発覚。
どうにもならず、
if (userAgent.indexOf('chrome') != -1) { if(window.devicePixelRatio == 2){ } else { }
というように、「devicePixelRatio」でRetina Displayの判定、userAgentでChrome判定を組み合わせ、
この条件に合致した場合は竹取JSが動かないように書いてあげて解決。
現状、致命的なCSSバグでどうにもならないのでMacのRetina dhisplayでChromeは縦組みを諦めること。