Takazudo Clipping*

Firefoxの印刷と闘う

色々CSSの描画が賢いFirefoxも、印刷に関してはてんでダメです（2007年4月現在）。
そんなのにちょっと対応するTips。

※このバグには、もっと良い解決方法がありました　→　Firefoxの印刷と闘う　その2

各ブラウザのCSSに対するサポートはかなり良くなってきたものの、印刷関連のプロパティ対応はかなり遅れているような感じがするし、印刷時のバグというのは結構ひどいのが多いです。その点に関して、Operaだけはかなり頭いいですが。仕事で(X)HTMLを書くとき、印刷時にこのページおかしいんだけど！という問題は、これまでかなり直面してきました。趣味でやっている分には、印刷時なんてスタイルシート切っちゃえばいいんだ、ヘッダもフッタもナビも消して白い背景に黒い文字だけのほうがプリンタのインクも節約できていいでしょ思うけど、仕事で何の説明も無しにそれやると、クレーム来ても文句言えないです。たいてい、画面上のとおりに印刷できると思われてるし。

IEでもFirefoxでもSafariでもちゃんと見れるぜ！という次のステップは、印刷時にIE6で（ほぼ）完璧に出ますって所だと思います。それはなんとかなるんですが、Firefoxというのは、印刷に関して、どうにも頭が悪すぎる。Bugzillaでも印刷時に切れるとかなんだのというポストがたくさんあるけど、対応策の結論は出てないみたいです。要するにどうにもならないっぽい。（あったら教えてください）

下は、floatを利用したレイアウト。

フツーのfloatレイアウト

どこでも見かけるレイアウトだと思います。floatで左右にコラムを寄せてclearして終わり。これをFirefoxで印刷すると、2ページ目が下のような感じに。

メインエリアと左ナビのエリアを囲むdivは、1ページ目で終わっちゃうという計算方法らしい。だから、2ページ目の右に寄せたメインエリアは、floatされた状態になるので、後続するフッターは左に回りこんでしまうと。（なんじゃそりゃ）
そこでコレを解決する方法が2つあり、まず一個目は、下

印刷時のみ左ナビを相対配置するレイアウト

これは、floatはまんまなのだけれど、@media printで、印刷時にのみ、左ナビをfloat配置ではなく、相対配置で、メインエリアの左上にもっていき、右ナビはのfloatを解除してあげる方法。floatをやめたからclearのためのbrは消してあげる。これならば、メインエリアはfloatしていないため、フッターがめり込むことはない。おかしいのはFirefoxのみなので、Firefox2以下にのみ適用させるCSSを作ってjavascriptで読み込み、@media printをそれにかいてあげたりすれば良いかも。
2つ目の方法は下

ネガティブマージンのfloatレイアウト

これは、左ナビはfloatさせるんだけれど、左ナビの右マージンに、自分の幅分のネガティブマージンを指定し、後続するメインエリアがかぶさるようにする。そんで、メインエリアには、左ナビの幅分＋間のスペース分の左マージンを指定してあげることでレイアウトを行う方法。この方法だと、左ナビの方が長くなった場合、フッタにめり込むことになるので、左ナビとメインエリアを囲むdivに、floatをクリアするハックを適用する。かなりややこしいけど、この2つの方法であれば、以下のような印刷結果を得られる。

やったーこれでFirefoxも印刷完璧だーと思っても、何故か、左ナビが長くなると、以下のように1ページ目の終わりで左ナビがぶっちぎられる・・・

まぁ、左ナビが2ページに渡るぐらい長くなる場合はめったにないし、そんな時のFirefoxの印刷を気にするやつなんていないだろうけど、この場合を限らず、Firefoxでは、ページをまたぐと、一部が消えたりすることがたまにあり、その条件がよくわかんない。とにかく、Firefoxは印刷が頭悪い。大事なことは、ブラウザの印刷対応っていうのはけっこうしょぼくて、Firefoxは特にだめなんで、対応することはできないんですとクライアントにいっておくことなんだろーか。

多くのサイトでは、印刷時には印刷用のレイアウトCSSを適用させようともありますなー。それは例えば、下のサイトをプリントした時に見れるような画面で、個人的にはこっちの方が好きだけど、カッチリデザイン組まれたサイトで、こういうプリントレイアウトにしようというのは、結構情熱を持って色々クライアントに説明する必要があるだろーなぁ。