Creating Print Stylesheets for Your Blog

I spent part of today writing print stylesheets for our Movable Type weblogs and my own personal blog. One thing I think is crucial with print stylesheets is that less is more. This means a couple of things when you are trying to optimize the page for print. First, that stylesheet you have been using all along needs to be set up so that it is for screen only. This means in Movable Type you take and change this:

<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” />
to this
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” media=”screen” />

If you don’t do this you will be fighting your screen styles when you create your print stylesheet. This is bad and makes lots more work. Having the stylesheet only be for media-type “screen” is the default in WordPress so you don’t have to worry about this. Once you have done this you can start formatting the print version from scratch. Without a print stylesheet you’ll get a very plain looking page. THIS IS OKAY! In fact its what you want so that you can add minimal formatting to make your page look good when it is printed.The most important thing you will want to do in your print stylesheet is “hide” the things on your page that you don’t want to show up when you print. For example you might not want to show your banner or navigation when you print. To do this you use a CSS property called “display”. The display property is somewhat difficult to explain what you need to know is that can be used to hide things on a web page. So set it to {display: none;} which basically means “don’t display this element”. You can do other helpful things like making the background white and all the text black, and setting up rules for page breaks. Below is my print stylesheet for this blog.

/* Print Style Sheet */
/* added print stylesheet for LWC */

@media print {
body { background:white; color:black; margin:0 }
#sidebar {display:none;}
#footer {display:none;}
.navigation {display:none;}
#commentform { display:none }
a {color:#000000;}

/*Some rules about Page breaks */
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
}

This is a really simple print stylesheet but it does gets the job done. It didn’t take me long to create and it makes life a lot easier for users when they print my site. The downside is that if you want a screen shot of my site you are going to actually have to take one rather than printing the site or sending it to PDF. I think that this is okay though. Based on what I’m seeing in my server log files. Few people are visiting my site in person. Which I interpret as meaning that content is king and my design doesn’t matter as much. If I saw different traffic in my server logs I might decide to do things a little differently. Because maybe people would want to print what they were seeing not just the content. This is an issues you need to be sensitive to when you create a print stylesheet. However, my opinion is if you have a content intensive site that having a print stylesheet which drastically changes how the pages looks is okay. Especially if your site doesn’t print well otherwise. However, as with any design decisions you should get feedback from your users when making this type of decision.