Print Stylesheets

The web is primarily viewed through the computer screen, but sometimes it’s helpful to print longer articles. For anything longer than a few screens, I prefer to read a printed copy. Many sites will provide a “printer-friendly” version of each page through a special link. But, you can do the same thing with cascading stylesheets (CSS), providing both on-screen and printed presentations of each page automatically. This article is a brief explanation of adding support for print stylesheets through CSS.

General Steps

Assuming your web site is already using CSS, adding support for print is pretty straightforward:

Decide where the print-specific CSS definitions will go. Using CSS, there are two methods for defining the styles for print media (see the CSS2 definition for the spec details):
- Including the print style definitions in the main stylesheet, enclosed in a “@media print” group. This has the benefit of not adding a second stylesheet and modern browsers have good support for the @media attribute, but older browsers may ignore the @media group specifier and may use the definitions for screen_ media as well as for print. (See Codestyle.org for more on this.)
- Linking to a second external stylesheet file, with the media attribute set to “print”. I believe this is the safer method because older browsers (e.g., Netscape 4.x) don’t understand the method and will safely ignore all stylesheets. The downside is that you’ll have a second stylesheet file, but the bandwidth hit should be minimal.
Create the CSS style definitions for the print media. Because CSS is “cascading”, your main CSS definitions will be read first, followed by the print media specific ones. You’ll only need to define style elements you want to hide or handle differently. A general approach would be to remove everything you don’t want printed (by setting “display:none”), adjust font size and typeface, reduce or remove margins, remove borders, and set colors to black on a white background. There are other changes that can be made depending on your layout, but these are the most important ones.
Update your web page templates to refer to the new styles. If you’ve stored the CSS definitions in an external file, add a link to it in the header of each web page just after the link for the main CSS. For example:
```
<link rel="stylesheet" href="styles-site.css" type="text/css" />
<link rel="stylesheet" href="styles-print.css" type="text/css" media="print" />
```

Survey of Common Blogging Tools

Adding print stylesheets to my site is a nice touch, but what I really want is print stylesheets on everyone else’s sites. I took a quick look at some popular blogging tools to see what kind of built-in support they offer. Built-in support for print stylesheets would be the best way to make this popular.

If anyone has more details on any of these tools and their support of print stylesheets, please let me know. I don’t have all of these installed, so some of this may not be 100% accurate.

Movable Type

Movable Type does not include print stylesheets in its standard templates as of version 2.6x. My example below can be used with most of the standard styles to achieve a usable result. To add print stylesheets to Movable Type:

Create a new template for the print stylesheet; I call mine Stylesheet Print and use the filename styles-print.css
Edit each of the archive-related templates to refer to this new stylesheet as described above
Rebuild the entire site and test

TypePad

TypePad is the new weblog service from SixApart (the makers of MovableType). As far as I can tell, TypePad does not include print stylesheets in the standard templates.

WordPress

WordPress is a nice looking publishing system built on PHP and MySQL. I need to investigate this one further. Some sites built with WordPress do have print stylesheets, but I’m not sure if they come with the standard templates or not.

Radio UserLand

Radio UserLand is another popular tool that has been around for a while. As far as I can tell, it doesn’t include standard print stylesheets. Need to investigate further for the steps required to add them.

Example

As an example, I came up with a minimal print media stylesheet for my Movable Type site. Click on the “before” and “after” thumbnails to see a larger image. Print stylesheets lowered the page count from 8 to 4 and removed the right-hand column.

The minimal print media stylesheet I used is shown below:

/* Sample print media stylesheet for Movable Type
   Brian Cantoni (http://www.cantoni.org) */

body, .blog, .blogbody, #content {
        color:black;
        background:white;
}

body {
        margin:0;
        border:none;
}

#banner, #menu, #links, .posted {
        display:none;
}

#content {
        float:none;
        width:100%;
        margin:0;
        border:none;
}

Notes

Another simple option for printing without any styles at all is to set your main stylesheet include to media type ‘screen’. For example:
```
<link rel="stylesheet" href="styles-site.css" type="text/css" media="screen" />
```

Posts