Creating a Print Stylesheet
On Friday I wrote about the importance of styling your website so that it prints well. As promised then, I’m going to go into a bit more detail on how to develop an effective print stylesheet for your site.
CSS can be targeted easily at different media types, so you can have one stylesheet controlling the appearance of your web page and another the appearance of the printed page. This is defined in the HTML page’s <head> section.
<link rel=”stylesheet” media=”screen” href=”styles/foe_global.css” />
<link rel=”stylesheet” media=”print” href=”styles/foe_print.css” />
As you can see, one stylesheet is defined for the “screen” view of the webpage and the other is defined for the “print” view. Without a “print” definition the site will print as if it had no styling information, as can be seen by the screenshot on the right.
The print stylesheet for Fog of Eternity is a heavily modified version of the main stylesheet, although it is also reasonable to create a print stylesheet from scratch. My general feeling is that someone printing a website page is doing so for a quick reference of the content on the site. I simplify the appearance and remove all the elements of the page that I don’t think would be relevant to someone printing it out - including the navigation bar and the right column of the site.
Styling the main body
My print stylesheet gives the site a fixed width (700px)to the #content <div> that’s appropriate for printing - although I can (and may) also choose merely to define the margins and maintain a fluid width. This would account for larger print sizes and give a choice for portrait or landscape layout printing.
Most of the defining features are otherwise the same - font styles, colours etc. Though while the main web stylesheet defines font sizes in ems to allow for flexibility and accessibility, use of fixed font sizes defined by px or pt is more practical for printing.
Removing redundant page elements
There are three elements in the web code that we don’t want to print, all contained in <div> elements: #skip-navigation, #navigation and #right_column. Removing them from the printed page is easy, as each of them require only a single property for styling:
#navigation
{
display: none;
}
Branding the site
The printed page of the site now looks neat and tidy and only prints the relevant content, but it lacks a corporate identity. This is because the Fog of Eternity logo is a background-image property in the web stylesheet. For the print version I want the image to be part of the HTML, and I’ll then style it.
I create a #printlogo div in the HTML and add the logo image there. I style that so that it aligns correctly in the print stylesheet, but I don’t want it to appear in the web page. Therefore I give the #printlogo the property of display: none in the screen stylesheet, so that it only appears in the print version.
Just the basics
As you can see from the screenshot on the left, the various styling changes I’ve made make the site appear much differently in the print preview. Now the style maintains the look and feel of the web page while ensuring that only the relevant content prints.
I’ve only touched on the basics here, and to be fair the print stylesheet for Fog of Eternity is somewhat rough and ready. There are a great many more refinements that are possible, some of which I’ll examine in the future, and many options for developing different structure and typography to allow the most attractive printing styles possible.
Relevant links
- CSS Design: Going to Print (A List Apart)
- Print-friendly CSS and usability (456 Berea Street)
- Printing the Web: Solutions and Techniques (Smashing Magazine)
April 23rd, 2008 at 10:53 am
I must say this is something that I often overlook. I really must add some of these to my sites. Something so simple that can add to the professionalism of a site.
April 23rd, 2008 at 12:00 pm
It’s really easy to overlook actually, simply because how often do you print your own site? Out of sight, out of mind. :)
I’m pleased I’ve got it done, even though it is currently a rough and ready effort (think there’s a reasonable amount of redundant code in the CSS). But it’s something I’ll address when I reskin the site in WordPress over the next couple of weeks.