In the process of developing a web site it’s good practice to think of all the ways that people will use and access your content; that’s the basis of good usability design. One thing that developers often overlook is how the site prints. Many think there’s no need; that no one prints from the web. Depending on your site’s content that might be true, but many people do take advantage of paper.
My goal for this article (my first blog post) is to offer an insight into just how easy it is to make a site printer friendly, and convince you to do away with those “printer-friendly” links.
CSS has offered a way to do this for some time now. All the major browsers support it, including IE 5+, Firefox, Safari, Opera, Chrome, and Konquerer.
Despite popular belief, you do not need to create an entirely new stylesheet for printing, just one that supplements your generic one. Let’s take a look.
First we need to create a new .css file dedicated for print and call to it in our head:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Notice the media=”print” attribute. If this is used in conjunction with a global stylesheet (one that does not have a media attribute) then it will be used as a supplement, not replacement, when printing.
What do I put in print.css?
There are a few things I always put into the print stylesheet that makes future work easier:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /* PRINTER FRIENDLY USUALLY IMPLIES BLACK TEXT */ * { color: #000; background: #fff; } /* MAKE LINKS SLIGHTLY GREY, INDICATING THEM ON PRINT */ a:link, a:visited { color: #555; text-decoration: underline; } /* USED FOR ANYTHING THAT SHOULD DISPLAY ON SCREEN BUT NOT PRINT * THIS IS VERY USEFUL FOR QUICK CONTENT EDITING FOR STUFF YOU * KNOW DON'T NEED PRINTED */ #noPrint, .noPrint { display: none; } /* CLEANS UP PRINT APPEARANCE OF PARAGRAPHS AND LISTS * ADDING A RIGHT MARGIN MAKES IT EASIER TO READ LONG * PARAGRAPHS */ p, ul, ol { text-align: left; width: auto; margin-right: 0.5in; } /* THIS IS TO PREVENT FIREFOX FROM TRYING TO PRINT EVERYTHING * ON ONE PAGE */ #mainContent { float: none; display: inline; } |
Let’s take a look at this.
Line 2: First off, we made all (*) text black and ensured a white background, the reasons I’m sure are obvious for print.
Line 8: Links should be indicated for clarification. More on link goodness in a minute!.
Line 16: This makes it very painless to specify which things should not be printed, instead of adding each class and element in the stylesheet. For example, on any small business website that I have worked on, the contact page contains their address, phone number, and a contact form. By wrapping the contact form in <div class=”noPrint”>, when the page is printed, they get the contact info, and not the useless input fields.
Line 23: We left-align paragraphs and lists, and set a right margin of 0.5in. This makes it more readable. We could have given the entire body a right margin, that’s up to you, but I prefer it this way. And by using inches instead of ems or pixels, we know exactly how it will be on a printed page.
Line 31: This can be nerve-wracking for those new to print css. Firefox wants to print any display: block elements on one page, even if they’re too big to fit. So if your main content div is set to block, then the entire thing will be cut at the end of the first page. Set everything to inline and no float will prevent this from happening.
Those are the key things I always put into my print stylesheet, along with a list of layout elements that do not need to be printed. So specifying that the header, footer, and other navigation elements to be removed, the main content has a fighting chance at glory on paper.
Link Goodness!
As promised, there are some things you can do with links and other elements that drastically improve their meaning in print (make the accessibility Gods proud). Normally, when a link is printed, it has no meaning other than its context. Instead, we can make it show the link’s URL destination inline, and only when printed.
Add this to your print.css stylesheet:
/* ADDS THE URL AFTER THE LINKS WHEN PRINTED */ a[href]:after { content: " (" attr(href) ") "; }
a[href] specifies this is only for a link (the a tag can be used for other purposes without the href attribute). The nifty :after part tells it what to do right after a link (in this case we want to display the url).
content: ” (” attr(href) “) “ says that we want to add the content of the tag’s href attribute (attr) and we’re wrapping them in parentheses (hence the quoted parentheses).
The end result is quite nice and clear:
It’s a very easy way to make your print content more usable. You can do this with virtually any tag, I personally do it with the acronym and abbr tags too:
acronym:before, abbr:before { content: " " attr(title) " ("; } acronym:after, abbr:after { content: ")"; }
End result:
Notice the PDF acronym is expanded, but only in the print version.
There’s more that could be said about this, but the best way to learn from here is to make “print preview” your best friend.
Feel free to comment; let us know if there’s any other cool tricks you have come up with to improve print-friendliness. But be gentle, this was my first blog post.
