Takazudo Clipping*

display:tableで印刷対応

まずは、普通にfloat:left left leftで左に詰めたレイアウト。

• floatによる3カラムレイアウトのサンプル（印刷対応無）

<div id="all">
    <div id="header">header</div>
    <div id="body">
        <div id="localNav">localNav</div>
        <div id="main">main</div>
        <div id="relatedNav">relatedNav</div>
    </div>
    <div id="footer">footer</div>
</div>

このページを印刷プレビューすると、Firefoxの印刷と闘うで書いたとおり、フッタがめりこんでしまいます。ページを超えてしまうと、float clearの処理などがそこで終っちゃうんだよなというように思っていて、実際、Firefox3になっても、印刷ましになったけどうーんやっぱりいまひとつ…な感想を持ってました。

がしかし、印刷用CSSにて、display:tabe, table-cellを以下のように使い、強制tableレイアウトにすると、ページを超えてもちゃんと綺麗に印刷できるのです。Firefox2でも3でも。

div#body{
    display:table;
}
    div#localNav,
    div#main,
    div#relatedNav{
        display:table-cell;
        float:none;
    }

• Firefox印刷対応済サンプル
• Firefox用印刷CSS

floatをやめて、各カラムはテーブルのセル的に表示させます。困ってるのはFirefoxだけで、IE7以下だとdisplay:table関連に対応していないので、こんなかんじでFirefox用印刷CSSをhead内で読んであげます。

var firefox = (navigator.userAgent.indexOf("Firefox") != -1)? true : false;
if(firefox) document.write('<link rel="stylesheet" type="text/css" media="print" href="print_fx.css" />');

これで普通にFirefoxでもレイアウト崩れません模様。

カラムの順序がHTML上で前後するケースの対応

しかし、右ナビのカラムを、HTML上、先に書く場合もあるんじゃないでしょうか。リキッドの時とか特に。こんな場合はどうしよう。

• 右カラムが先にあるfloatによる2カラムレイアウトのサンプル（印刷対応無）

右ナビのHTMLを先に書いてfloat:rightしているようなケースです。この場合、さっきと同じように、display:table-cellでごまかそうとしても、先に書いてあるのが右ナビのHTMLなので、右ナビが左に来てしまって困ります。そんな時はこんな感じで書いてあげれば同様に強制tableレイアウトできます。

div#body{
    display:table;
    direction:rtl;
}
    div#main,
    div#relatedNav{
        display:table-cell;
        float:none;
        direction:ltr;
    }

• Firefox印刷対応済サンプル
• Firefox用印刷CSS

div#bodyで、direction:rtlを指定し、左右逆転。その中のカラムではdirection:ltrを指定して元通りにしてます。これでFirefox印刷も結構ばっちりいけそうな予感。あとのブラウザは大概問題無く印刷できるので、どのブラウザでも印刷されるのフツーですよクオリティにできますな。Firefoxの印刷と闘うで書いたようなめんどいことせんでもいいし。ちなみにIEで印刷した時にガタガタになって困ってる人は、ひたすらブロック要素にzoom:1つけてhasLayoutガチガチにすれば大概直ります。

2008/11/14追記

Firefox3にて、どうやら、この方法でdisplay:tableにした要素が、ページの終わりピッタリにくると今まで通り崩れてしまうようです。あと、絶対配置した要素の親がページをまたいだりしても、絶対配置した要素がページをまたがなかったり。うーんまだ厳しそうです。