Debugging print stylesheets
Posted on by Steve Workman About 3 min reading time
Simple premise: web sites are designed for the screen, they are meant to be viewed through a computer and that’s about it. Still, most people want to print out a web site at some point and your design probably won’t look very good. Print media strips out all backgrounds and forces a page width so large fixed width sites simply won’t print all their detail.
The simple answer to this is print stylesheets using the media=”print” or @media print options. This is covered in great detail all over the web, and so the basics of print stylesheets won’t be told here. What I’m going to cover is how best to debug those print styles so that you can quickly edit and get a good print stylesheet together.
Why can’t I see you!
My number one issue with debugging print styles is having to use print preview to show what the effects of a print stylesheet will look like. It can take a long time for older browsers (IE6) to render print previews and it’s just not necessary.
Simple remedy: when debugging, make your print stylesheets media=”all” to see live previews of what the effects are.
This isn’t ideal, especially if you’re debugging on a live site (though if you are, you really should get a development environment). So, thankfully, there is an alternative, in the form of the Firefox Web Developer toolbar.
In the image above, I’m using the web developer toolbar to display my print styles, reducing my web page to what print preview will see. You should also tick the “persist features” option or you’ll have to keep turning the print stylesheet on each time you visit the page.
This technique has additional benefits, in that Firebug, the web developer’s best friend, picks up the print styles as if they were the only ones available. This allows you to experiment with the stylesheet on the fly, speeding up development time.
What about IE?
Due to the unique way that most developers are funded, you will still have to deal with Internet Explorer. IE 8 is pretty good at print styles, using the “fit to width” option by default, which gets around most of the awkward layout problems. However, IE 6 doesn’t have this facility, so layouts often go wrong. Here’s a few workarounds for common problems:
Pre-requisite
Make yourself an IE 6 only stylesheet. In the spirit of graceful degradation, use conditional comments to target the offending browser with its own stylesheet. This allows you to target IE6’s inflexible width issue without damaging the other stylesheets. Put something like this in your site:
Make all your IE 6 specific changes in this file. As with the first technique, you may want to change the media to “all” to see what happens without using print preview.
My content goes off the page (to the right generally) and doesn’t come back
With a print page in portrait mode, you only get about 70% of the screen space. In this case, content simply overflows off the page and can’t be retrieved. Instructing your users to print in portrait mode alleviates this a little, but isn’t ideal for most clients.
If you have a fixed width layout, start by changing all of these pixel values into percentages. IE printing responds quite well to this in both landscape and portrait. If this doesn’t have the desired effect, consider removing and floated columns that you may have, allowing the sections to naturally flow beneath each other. Whilst this isn’t ideal, it can prevent content loss.
There’s a blank page in my printing / nothing appears when I go to print preview
This is an odd one. This can be caused by improperly clearing floated elements, so check those out. A good way to debug this is to turn off any custom styles that you’ve added (i.e. make sure your main stylesheet is set to screen, or comment it out) and see if the content prints. If it does, build your stylesheet back up until you find the problem.
If you still don’t see anything, it’s likely there is an in-line style causing the issue. SharePoint has tendency to add “height: 100%” to a few elements, which to most browsers means absolutely nothing, but IE6 takes seriously. Set that to “height: auto;” and you should get all of your content back again.
I’ve got some VML (IE’s Canvas implementation) that I need to hide but can’t
Sad news here, I don’t believe you can hide it in print stylesheets. If anyone knows how to do this, please let me know.
Don’t forget: printing is about the content
A printed page doesn’t have to look beautiful, with rounded corner borders or large images; the content should be laid out simply and should flow correctly. Use these techniques to get that right and all your print styling headaches will go away.