webページで縦組みを導入した時のメモ

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は縦組みを諦めること。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA