CSS Print Stylesheet Tips & Tricks
People still print web pages. Just think about articles, blog posts, recipes, contact information, directions or real estate sites. Someone somewhere will eventually try to print one of the pages you made. Follow these useful tips and tricks to optimize your site for print.
Make color changes explicit.
Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.
Remove unneeded page elements.
Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.
Set page width & margins.
Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.
Avoid odd page breaks.
Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.
Force background images & colors.
Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).
Display link URLs.
Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:
Here’s the printed result of the code above:
With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.
One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:
Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:
CSS4 also makes expanding external links easier:
Provide QR codes for easy URL references.
Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:
Worth-while CSS Print Articles & Tutorials
Check out these other great articles and tutorials regarding CSS printing: