[全体] [技術メモ] 各一覧の該当ページへ

背景画像の印刷

[技術メモ] 2008年5月8日(木曜日) 19:54

おのれwMSめぇwww

IEのデフォルトでは、背景扱いの画像が印刷されません。
「ツール→インターネットオプション→詳細→背景の色とイメージを印刷する」の呪文を唱える必要があります。IEは、なんでまたこんな深い場所に隠すのでしょう(ノД`)ちなみにOperaは印刷時にサクっと選択できるので素敵です。

文字列代替画像

例えば、<h1>ページのタイトルだぜこんちきしょう</h1>等とタグを書きます。
そして、単純な装飾では足らず、画像に置換するケースが少なく無いのですが、これが、印刷されません。
「呪文」を唱えれば済むとは言え、そこをナントカしてくれという要望も存在します。

印刷専用時専用の画像をHTMLレベルで入れ込む

<img … class=”forprint” />などとし、印刷時(@media print)以外は 非表示(display:none;)に。
しかし、タギング的にモヤモヤしますし、これ実は非印刷時でもしっかり読みこまれてます。(少なくともIE6では)印刷用に大きな画像読んじゃおうかな!なんて欲張ると結構な転送量に。

印刷専用スタイルにする

画面の印象と大分変わってしまいます。それを逆手にとって「画面はモニタインタフェイス専用、刷れば即A4パンフ!」なコンセプトしてしまうのも手ではあります。

DOMスクリプティングで置換

なにやらJavaScriptで無理やり(笑)imgタグに置換する手段もあるようです。一見もっとも強引ですが、案外、エレガントかもしれません。

妙技

「背景印刷の注意書きでは駄目ですか…」と心を決めたそんな中、クライアントから(おいw)妙技を教わりました。
h1#sample{
color: #fff;
display: list-item;
list-style-image: url(head_bg.png);
list-style-position: inside;
letter-spacing: -1000em;
font-size: 1pt;
}

これ、無理やり「リスト化」し「ポインタ画像」として背景を読み込むと印刷される!という技のようです。
実際試してみると、width:0pxなど色々調整する必要があり、その上IE以外の主要ブラウザで表示出来ないという致命傷まで。残念(ノ∀`)

ん?なら、IEにだけ印刷スタイルを用意して、それで上記テクによる再置換をするのがベストか?
「背景印刷呪文」の弊害はIEのシェアの広さに起因しますので、いっそIEのみ対応で良いんじゃないかなと。
IEだけびブラウザ判定ならConditional commentsが使えるのも利点でしょうか。

コメントは受け付けていません。

この投稿へのコメントは受け付けていません。