I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
Copy & paste the code below to embed this comment.
Sam Ellis
I have found previously that images such as logos (i.e. better suited to GIF files) work much better when printed if they are NOT anti-aliased. You get much better edge quality without any fuzziness.
Copy & paste the code below to embed this comment.
Jo VDR
You can completely hide your the printable high resolution image too so why not use:
<img class=“printHiResImage” height=“0” width=“0” alt=”“>
And in your print stylesheet add this:
I use low-resolution and clickable thumbs for accessing the high-resolution images.
There http://www.phpclasses.org/ are a lot of good gallery-scripts that make it automatically.
I’ve built an app that does quotes, and people really need to be able to print. The images I put up at first look great on the site then as soon as you go to print it is crap…
Using 300 & 150dpi images has fixed all the issues. As this is an application and the same 7 images are used over and over again, I’ve simply added a preload js function. Works great.
Now all I need is to get IE7 to print Transparent PNGs…
Copy & paste the code below to embed this comment.
Carlos Bacco
I suggest you turn off antialiasing to produce B/W print images.
The circles in the example are antialiased, so the printer will use patterns/hatches where the pixels are gray. Using high resolution jagged images improves the sharpness of the borders (barcode readers will thank you too).
56 Reader Comments
Back to the ArticleJeena Paradies
I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.
The article is in German, but there are the HTML and CSS too, so you should understand how it works.
Sam Ellis
I have found previously that images such as logos (i.e. better suited to GIF files) work much better when printed if they are NOT anti-aliased. You get much better edge quality without any fuzziness.
Sam Ellis
You only get the better quality when you create the big, and print them small, as per example.
Jo VDR
You can completely hide your the printable high resolution image too so why not use:
<img class=“printHiResImage” height=“0” width=“0” alt=”“>
And in your print stylesheet add this:
img.printHiResImage {width:30px;heigth:30px}
Jo VDR
If need to preload a high resolution (eg 150dpi – 300dpi)
You can always preload the image with CSS.
Print Styles:
/* preload print image */
div#Print {background:transparent url(’../images/printHiResImage.gif’) no-repeat -1000em -1000em;}
/* set width and heigth of print image */
img.printHiResImage {width:30px;heigth:30px}
The HTML:
<div id=“Print”>
<img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
Jo VDR
One thing more is needed though:
Set div#Print {display:none} in the normal stylesheet
And in the print stylesheet (I guess this stylesheet with the media attribute , media=“print”, is only downloaded when printing actually something ??)
div#Print {display:block}
Jo VDR
Images of course have a src too:
<img class=”?printHiResImage” src=“images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”
Jo VDR
To sum it all up:
– preload the high resolution image with CSS, hide print image from view
– show <img> in Print Stylesheet
In your normal Stylesheet:
div#Print {
background:transparent url(’../images/printHiResImage.gif’)
no-repeat -1000em -1000em;
display:none;
}
In your Print Stylesheet:
img.printHiResImage {width:30px;heigth:30px}
div#Print {display:block}
HTML:
<div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
Jo VDR
<div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>
should be:
<img class=”?printHiResImage” src=”?images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”
imran hashmi
Hi
Please can any one help me to manage a stick up footer on the website for IE 5.0 +.
As you can see 1 on http://www.bmw.co.uk
thanks
Imran Hashmi
imran hashmi
Hi
Please can any one help me to manage a stick up footer on the website for IE 5.0 +.
As you can see 1 on http://www.bmw.co.uk
thanks
Imran Hashmi
Gustav Andersson
useful
shashi kumar
pls allow me download the image
John Kelling
I use low-resolution and clickable thumbs for accessing the high-resolution images.
There http://www.phpclasses.org/ are a lot of good gallery-scripts that make it automatically.
Nicholas Orr
I so needed this.
I’ve built an app that does quotes, and people really need to be able to print. The images I put up at first look great on the site then as soon as you go to print it is crap…
Using 300 & 150dpi images has fixed all the issues. As this is an application and the same 7 images are used over and over again, I’ve simply added a preload js function. Works great.
Now all I need is to get IE7 to print Transparent PNGs…
Carlos Bacco
I suggest you turn off antialiasing to produce B/W print images.
The circles in the example are antialiased, so the printer will use patterns/hatches where the pixels are gray. Using high resolution jagged images improves the sharpness of the borders (barcode readers will thank you too).
Just test and see.
Cheers.