05 Print Stylesheets

Posted on by

We take for granted that we are styling the web site for the screen, but we should not forget that its also important to create a style sheet for when a user prints the web site. You can imagine that a potential client can print out a page from your portfolio to show to someone else at a meeting for a potential treatment of whatever project they are working on.

Clean It Up

The most useful thing is to remove some of the clutter. When a user prints a page, they do so for the content. Do them the favor and hide all that is not necessary. The footer, navigation and other unnecessary elements can be set to display: none; . The remaining elements often need their screen styles neutered, and the properties have to be rewritten to clean up the print style. The browser itself applies a print style to the page, removing the background, etc, and the HTML5 Boilerplate has print stylesheet, but you still may need to tweak it yourself.

Add your additions to the print styles at the bottom of the page in the boilerplate:

/* ================================================
   Print styles.

   ================================================ */

Fonts are often larger on the screen than in print, so set the font to serif 12points in size: p { background: white; font: 12pt/14pt "Times New Roman",Georgia,Serif; } and h1, h2, h3, h4, h5, h6 to appropriate sizes.

Rearrange It

It is likely that the page is horizontally laid out for a screen. You may want to rearrange the elements vertically for the printed page.

Adding Information Using CSS

Information can be added by using the content attribute before the header, for example, so you can customize the printed page: header:before { content: "Contact artist for more info, telephone number, email and website, etc"; } or anything else you want the printout to have.

It’s possible to print out the actual link address after the links using a:link:after, a:visited:after { content: " (" attr(href) ") "; } but that prints out all links, so you may want to limit that to to the article tag. This is already taken care of for you in the boilerplate.

Check to see how your page prints out, and add styles to the print section of your CSS style sheet if needed.