Every website needs a print style sheet, especially informative websites. I thought about a little trick, to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper.
Preparation
Make a image in Photoshop that you want to be printed. You can use your company logo and/or the url.
Integration
1. At the print.css somewhere between the <head>-tag
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print" />
2. Insert this code in your html/php/aspx/… file:
<div id="print-logo"><img src="/img/YOUR-IMAGE.gif" alt="Whatever" /></div>
OR a better solution is <img src="/img/YOUR-IMAGE.gif" alt="Whatever" id="print-logo" /> (thanks Nathan)
You can place this code wherever you want, I prefer after the <body>-tag of before the </body>-tag. This way, your logo will be presented at the top or bottom of your entire content.
3. Insert this code in your general style sheet:
#print-logo {display:none;}
4. Insert this code in your print style sheet:
#print-logo {display:block;}
Result
If someone prints your webpage, your logo and/or url is displayed on the printed page. Here are some examples that I made:
You can find a lot of free icons on the web, check the post of Smashing Magazine “Freebies Round-Up“
If you define your print style sheet, don’t forget to define your body tag font size and font family. It’s more fun to read Tahoma or Arial, then Times New Roman.
Only print what is necessary. Navigation, footer or header are necessary in your website, but when you print a webpage, you only need the important content parts.
I actually do this already, but be aware that the image(s) will also appear on your page if viewed with CSS turned off. In my case the branding appears as css background images so it is a desirable thing to have the substitute show when CSS is disabled.
Yes indeed, that’s exactly the way I work. The brand logo is in the css background, mostly with an “a-tag displayed blocked” around it to keep it linked.
If css is disabled, the branding logo of the printing ID will be displayed.
Using a background image is not a good solution, as background images are rarely printed. Use the img folks
Did you read my post?
That’s what my post is all about, using an image for printing, but not showing in your html…
You could position your websites logo as in image in your html, but from time to time, you don’t have the opportunity that your logo is at the top or bottom of your page. That’s why I wrote this article about.
Yeah, we have problems to print backgrounds, so this solution is very good to solve this problem
Like dave said above. If the user has css disabled your image will show up. A better solution if your layout will allow it is just to simply have your logo in an image field in the header where it will appear when printed.
However, if your layout doesn’t allow and for use of this technique there’s no real need for the extra div tag that I can think of. Alls the extra div tag does is adds to your markup.
You could simply tac-on a id or class tag onto the image and simply use something on the lines of img#print-logo {display:none;}, img.print-logo {display:none;}
Cheers
Pingback: Nachlese Oktober 2007 - Die Seiten des Monats | Nachlese | Dr. Web Weblog
Pingback: Best Of October 2007 | Best of the Month | Smashing Magazine
Pingback: Best Of October 2007 | Blog
Pingback: Ess - Sibran Lens » Blog Archive » The best of October 2007 by Smashing Magazine
Pingback: { Studio Rhoad } Media Design & Photography» Blog Archive » Best Of October 2007
Your company logo should probably be in your HTML and not as a CSS background image because it’s content, not decoration. That way you don’t have to bother about changing its display depending on whether its for the screen or print. You can still put an image in a hx tag if it needs it and give it appropriate alt text for those who have images off.
Pingback: 2007å¹´10月å°ç»“ | mashableCN
Pingback: è¡Œæ客 » Smashing Magazine 2007å¹´10月最佳
very interesting, but I don’t agree with you
Idetrorce
Forgive me for coming into this conversation late, but mine is an end-user problem that I have never as a self-confessed amateur been able to suss. It would be best for me to just ask the Q’: What, if any, is the best format to use when saving a graphic, i.e., logo, for sending across, say, a network that will always be printed perfectly…or at least resemble the logo while not throwing up any pixilation? If anyone is still concerned with this, an explanation would be appreciated. Thanks, Kai