2006/04/06(木) [n年前の日記]
#2 [css] _Lucky bag::blog: 印刷用 CSS で背景画像を印刷させる方法
「ページ印刷時に見た目がおかしくなる」という苦情を解決しようとして試行錯誤していたのだけど。IEの場合、デフォルトでは「背景画像を印刷しない」設定になってるし、Firefox では印刷時のみに各種背景画像や背景色が正常に反映されないしで。こりゃ印刷用のcssを別途用意しないとダメか、と思って作業してたのだけど。やはりロゴぐらいは画像で表示しないとまずかろう、という気がしてきた。
ということで、検索してみて件の記事に辿りついたり。
_wg:Printing CSS background images (sort of)
まさしくバッドノウハウ。とはいえ、コレを使わんといかんだろうなぁ。
ということで、検索してみて件の記事に辿りついたり。
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。
カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。
_wg:Printing CSS background images (sort of)
#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}
まさしくバッドノウハウ。とはいえ、コレを使わんといかんだろうなぁ。
◎ _メディア別スタイルシートを作ろう！（print編） - Software Linkage :
・ printメディアにとって不要な部分を出力させないふむ…。
・ 見栄えを色に頼らない
・ 重要な部分はURIを出力する
・ 背景はまっさらに ・ フォントサイズは一般的な絶対値に固定する ・ フォントは明朝体で ・ Mozillaのバグ
◎ とりあえず印刷時用のcssを追加 :
既に指定済みの background-image (背景画像指定)をどうやってリセットするのかがわからず。結局、透明なgif画像を作成して指定しなおしてお茶を濁してしまったり。
閲覧者側の、IEの印刷設定がどんな状態になってるかは判らないわけで。背景画像・背景色が印刷されなくても内容は判るように留意しつつ作成。
閲覧者側の、IEの印刷設定がどんな状態になってるかは判らないわけで。背景画像・背景色が印刷されなくても内容は判るように留意しつつ作成。
[ ツッコむ ]
以上です。