Firefox 1.5 の multi-column を試用

対応ブラウザ: （CSS Level 3）

Firefox 1.5 で試験的に実装されてる Multi-Column（段組み）機能を試用してみました。

うまくいけば、簡単なレポートは、今後、これで作成しようかな..とか思ってます。MS Word だと Mac や Linux ユーザーとの交換の便が非常に悪いし（僕のまわりには結構いるんです、これが。OpenOffice.org もあんまり人気ないみたいで、入れるのを嫌がる人が多いし）、テキストだと図表が入れられないし、TeX だと JIS にない Unicode 文字を扱うのがとっても面倒だし..で。実は HTML はそういう意味では結構美味しいです。贅沢を言わなければ表組みも図の配置も制御しやすいし、Unicode だってフルで扱えますし、データ交換だって再利用だってしやすいですから。

問題は段組みなんですけど、これが Firefox 1.5 で試験的に実装されたというので、早速、CSS を書いて実験。結果は、URL などの禁則処理にやや難があるものの（現時点では Firefox の仕様。url_breaker や url_breaker+ のような拡張機能もあるんですが..）、それを除けばまずまず。頑張れば、そこそこ複雑なこともできちゃいそうな感じです。印刷時の処理もなかなかです。ちゃんと紙の大きさに合わせて段組み位置を調整してくれます。(*^-^*)v

え？IE や Safari で使えなかったら、データ交換したことにならないじゃないかって？いいんです！僕個人の印刷用途が主目的なんだから！(爆)

div#page > div {

-moz-column-count: 2;
-moz-column-gap: 1.5em;

}

• サンプルページ
• CSS ソース（やっつけで書いてるので散らかってます。ごめんなさい。）
• PDF （印刷）イメージ

スクリーンキャプチャ

今日のところはこの辺で。また時間に空いたときにでも、もうちょっと hack してみます。Firefox ユーザー用にそのうち印刷用 CSS テンプレートでも書いてみようかな。

最後尾に書かれている「おまけ」部分も Firefox 1.5 から実装された（Opera や Safari では実装済みの） CSS 2 の自動連番（counter）機能です。コイツについてもまた近いうちにレポートします。

追記 ― url_breaker+ 導入

重い腰を上げて url_breaker+ を入れてみたら、キレイに折り返しされるようになりました。（ホントは拡張機能を入れてないユーザーを日頃から想定できるようにするために、GreaseMonky など、なるべくページの外観が変わるような拡張は入れないようにしてるんですけど..。）

url_breaker+ 導入前	url_breaker+ 導入後

あとはもうちょっと外観をキレイに整形して、CSS ソースも整理しないと。

参考サイト

• CSS3 module: Multi-column layout（W3C）
• Introducing the CSS3 Multi-Column Module（A List Apart）
• Firefox 1.5でのCSSスタイル指定向上
• CSSメモ: Firefox 1.5での新機能