Pro Blog Design

We have talked before about the basics of making your blog printer friendly. Whilst that will ensure that your content is legible on paper, what if you want to do more? What about sorting out the rest of the troublesome parts of your design?

With some simple adjustments to your print.css, you can make your blog truly printer-friendly.

The Header Area

In a single blog post, we might have 3 different headings; the blog title, the slogan, and the post title, and even some information about the post, such as a date. On screen, we can use CSS to style these however we want, but in print, we have 4 large, separate lines of text. It takes up too much space, and is especially noticeable on shorter blog posts. Look at the following example of how a page on Pro Blog Design printed originally.

To fix this, I used the following code in my print.css, to remove the blurb, and enable the post title and date to lie on the same line.

#content h1 {display:inline;}
#blurb {display:none;}

The result is much neater:

Links

When printing out a page containing links, the browser will revert to the default style of a blue color, with an underline. The problem comes with visited links, which are printed out in purple. The purple looks horrible, and knowing that they clicked on a certain link when they were online doesn’t really help the user, so why not remove it? Adding the following code to your print.css will ensure that all links are printed the same, on all browsers.

a:link, a:visited, a:hover, a:focus, a:active {color:#0000cc;text-decoration:underline;}

Images

When you place images in the content, you can use CSS to allow them to fit in with the content. When a page is printed however, those CSS styles are lost, resulting in messy pages and large, blank spaces. To fix the problem, you need only make sure that you copy over the styles from your style.css, into your print.css.

There are a lot of things that can be done with a print stylesheet, depending on your blog. For instance, in the Pro Blog Design print stylesheet, we have edited the comments, to lay out all of the details in a single line. What creative uses can you think of putting print.css to?