BLOG【CSS3】Firefoxでwriting-modeが使えなくて困ったのでどうにかした話2014/09/08atsuko.aツイートこんにちはフロントエンドエンジニアのあつこです(ΦωΦ)前回の記事の流れ的にAPIの話をするのかと思いきや、早速しません。先日Firefoxでドはまりしたのでその時の対処方を備忘録的に。(APIの話の続きは次に書きます、多分・・・)ちなみに8月中に滑りこみでスイカを食べました。私は主に自社サービス開発のチームにおりまして、先日もサービスの管理画面のコーディングをしておりました。表組の表示切り替えにタブっぽい表現を使うことになりました。text</a></li></ul>縦タブと横タブの判別はクラス名のclass="tablink1"/class="tablink2"でしています。0;}tablink2の縦書はCSS3のwriting-modeで実装しています。ちなみに日本語が入るとこんな感じ。英字→横書きが縦になる、日本語→フォント自体が立つ、という表示になっていますがこれもその他のプロパティで変えることが出来るようです。これをFirefoxで開くとファッ!?横並びはよしとして、縦書が何だか面白いことになっています。writing-modeが有効になっていないようです。writing-modeとはそもそもwriting-modeとはIEの独自プロパティで5.5から実装されていたようです。値はlr-tb/lr-bt/rl-tb/rl-bt/tb-lr...など実は結構あるのですがあくまでもIEの独自実装です。3」というものがありまして、多文化の筆記様式をサポートするためにCSSの機能を定義しています。筆記様式というのは例えば英語と日本語とアラビア語、等言葉を表記した際の向きや読み順の方法を指しています。2014/3/20時点で勧告候補となっていて、Webkit系のブラウザにベンダープレフィクス付きで先行実装されているようです(・ω・)その中の1つにwriting-modeプロパティがありまして、指定出来る値はIEのwriting-modeと異なります。デフォルトvertical-rl右から左へ読む縦書きvertical-lr左から右へ読む縦書き上でも書いたようにWebkitの先行実装+IEの独自実装だったためFirefoxでは再現できなかったという訳ですね。Firefoxでどうにか縦書にしたいさて、CSSのみで縦書実装が出来ないことが判明したわけでどうにかしないといけません。縦書を諦める(横並びのタブだけで何とかする)JS(jQuery)のプラグインでどうにかするCSSの回転で無理やり何とかする選択肢は↑の3択になりました。画面の構成上1(諦める)は出来なかったので、大人しくプラグインを探し始めたのですが中々しっくり来るものが無く結局CSSの回転とJSを使ってごにょごにょすることにしました。その他要素との兼ね合いでulごとごそっと回す方法が出来ないので、子要素をグリグリ回したいと思います。考えた手順はこうFirefoxだけ横並びにするそれぞれのタブの縦横の大きさを取得するタブの中身(a/span)を90度回転させるタブの外側(li)を元のタブの大きさにする↑を全てのタブにやったら縦に並べる1.CSS側の準備まず、縦タブの見た目をFirefoxだけ横に戻します。auto;}}Firefox用のCSSハックなんて初めて使いました。(いつもIEばっかりだから...)するとこうなります角丸等含め、liの中身が横に並んでおります。謎のmargin30pxは後で解説します。親要素(ul)の横幅を整える}何故大きさを取得してから回転させているかというと、CSSのプロパティtransformは親要素に干渉しないので子要素が回転したとしても回転する前の大きさを保持するんですね。transformの結果子要素がはみ出そうが小さくなろうが親要素は全く反応しません、すごい。́)シャキーンちなみに、CSSの方で指定している謎のmargin30pxもtransformの調節のために使っています。してできたのがこちらFirefoxで開いてみます...ドキドキわーい!タブが縦になってるよー!!!ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイちなみに日本語を入れるとこうなる。ポイントとしてはこちらCSSとJSの併用なので処理が重すぎないFirefoxのみCSSとイベントが発火するので、その他ブラウザはもっと早い横書きの要素を回転させているので、Firefoxでは文字が立たない(WEBフォントでどうにかなるかも...)文字が立たないのはどうしようもなかったのですが、WEBフォントを入れるほどの優先度ではなかったのでそのままにしました。タブの量が多くなると処理的にulごと回した方がよくなるかな、と思います。あと、Operaは見てない。3について前述の通りこれは様々な文化圏の筆記様式をサポートするためのCSSの機能群ですが、これにはwriting-modeの他にも以下のものが勧告候補として含まれています。direction文字の表記方向を指定する。jQueryこの記事を書いた人atsuko.aフロントエンドエンジニア猫派の甘党、胃が弱い系WEB屋。コーディングしたり、たまにデザインしたりします。