ブラウザによる印刷結果の違い 

Webデザインは難しい

印刷結果も考えて作る

会社ではXP ProのIISを使用してローカルのみですが自分用と限られた仲間のみにサイトを立ち上げています。
サイトといっても大したものではなく、パソコンでよく使う小技とかパソコンの設定の仕方のマニュアル、トラブル処理方法などこのブログよりももっと適当に作っているだけです。

暇な時はすることもあまりないので、CSSの勉強ついでに一からHTML+CSSで作成しているわけですが、CSSを使うとちょっとした間違いでレイアウトがずれてしまったりだとかブラウザによるpaddingの解釈の違いなどと色々難しいですね。

今回問題となったのが印刷するブラウザによってかなり違いがあるということです。
HTMLはWORDの様にページという概念がないので、マニュアルなど印刷する時に最後の行の文字がページにまたがってしまうことがあります。それをなんとかしようとpage-break-afterを使用して改ページすることにしました。
通常IE6を使用して印刷をするのですが、たまたまFirefox(ver3.5.5)で印刷してみた所プレビューでは3ページになっているのに印刷すると6ページ出てきます。次にOpera(ver10.51)で印刷してみると3ページで印刷されるのですが、文字が小さく余白も多いのです。
Firefoxで印刷ページが増えてしまったのはIE6で印刷するよりもFirefoxで印刷する方が行間が大きく、1ページ目の最後の3行が2ページ目にはみ出てしまい、そこでCSSの改ページが効いて3ページ目に移ってしまっていたわけです。Operaの方はデフォルトの印刷倍率が80%になっていたのが原因ぽいです。

結局調べてもCSSの書き方で統一する方法も見つからずブラウザの設定を下記に記載するように変更すると大体同じような感じで印刷することができました。

Firefox3.5.5

[ファイル] - [ページ設定] - [書式とオプション]の用紙に合わせて縮小にチェックを入れる。

Opera10.51

[メニュー] - [印刷] - [印刷オプション]の用紙幅に合わせるにチェックを入れて用紙サイズを100%にする。

このブログも一応記事を書くたびにIE、Firefox、Operaで表示確認をしてますが時々思ったようになっていなくて悩まされることがあります。
特にIE6は C:\WINDOWS\system32・・・などと長いパスを記入するとページ端にきても自動的に改行してくれないので(エントリー部のoverflowをautoにしているせい?)自分で改行をタグを入れてやらないとレイアウトが崩れてカラムがバラバラになってしまいます。

私の場合は趣味なので最悪の場合は諦めてとりあえず一つのブラウザできちんと表示させて他は捨てればすむことですが、ホームページ作成の仕事をしているような人は捨てるブラウザを作るわけにはいかない場合もあるようでバグを利用して表示を整えるというようなテクニックもあったりするようですね。

おまけ

CSSをまったく知らなかった私が勉強させていただいたCSSWebデザインのサイトです。

Web工房きくちゃん

URL:http://www.stylish-style.com/index.html

HTMLはなんとなく分かるけどCSSは全く知らないと言う人でも初心者の館の基礎知識編から制作実習編LV4までしっかりすれば結構理解できるようになりますよ!

この記事へのコメント

コメントをお寄せ下さい

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://z0001.blog87.fc2.com/tb.php/154-dbfa6dee