印刷用CSSで気をつけること

web

印刷時の改ページ備忘録 - 総天然色頁の内容を踏まえてまとめ直し。

  • IE6 SP3未満だと、印刷プレビューを開いた際にクラッシュする。
    • IETesterのIE6でもこの症状が発生する。XP SP3を当てたIEでは発生しない。
  • IE6だと縮小印刷が出来ないので、css zoomを使用する。
    • body { zoom: xx% } とか。縮小率はIE7以降やFx等で確認。
  • position: absoluteを使った3段組みレイアウトだと、1ページに収まらなかった場合にレイアウトが酷いことになる。(IE7, 8とも)
    • 1ページ目で右・左が終わっていて、中央だけ2ページに跨っているような場合、2ページ目にも右と左が出たりする。
    • floatで。
  • 印刷時はdynamic properties(css expression)が使用できない。
  • overflow: hidden使ってる場所は注意。
    • Fxでは、直前で改ページが発生。
    • Fx以外でも、改ページ発生時に見きれたりする。
    • overflow: visibleで上書き
  • IEでiframeの直前で改ページが発生？
    • 他に原因があるかも？
    • iframe { display: block; } で対処自体は可能だった。
  • widthの計算が狂うと、入りきらない部分がまとめて次ページに回される。
    • IEだけ？
    • レイアウトが崩れたら、試しに親のwidthを広げてみる。
    • marginやpaddingを削ってみる。
    • 駄目もとでwidthを再定義したりすると直ったりすることも。
  • とにかく2ページ目以降がレイアウトがおかしくなる。
    • floatを使った3段組みで、1ページ目で左が終わっていて、中央が2ページ目もあるような場合、2ページ目の中央部分が左端に配置されたりする。(Fx3.5で確認)
    • メニューとかそういう部分はなるべく印刷しない方が良さそう。

結論

  • トップページをそのまま印刷したい、という風にお客さんに言われたら、可能な限り抵抗するか、可能な限り1ページに収める。
  • やはりThe Holy Grail Liquid Layoutあたりを考慮するべき？