Beautify Your Print CSS

As mentioned in a previous article regarding CSS and projection, there are multiple forms of media to keep in mind when developing. In my personal opinion, the print stylesheet is a very important addition to any site. I find it frustrating when I come across an article I would like to print out, and the entire site design comes out on the page. Having a hard copy of something designed for display on screen is often hard to use and a waste of resources. When I say hard to use, I mean that there are many elements included in the printout that are not necessary for me to have, and in turn they clutter an otherwise useful document.

Functionality and Minimalism

Many developers have a wide variety of techniques so ensure the effectiveness of their print stylesheet. What’s great is the control you as the developer have over the content. You are able to exclude elements as you please and control every aspect of the style which really gives a lot of control over what comes out on a printed page. A well written print stylesheet will greatly improve the functionality of any project you’re working on. Not only will the site be great for the screen, but a printed copy will provide the same worth to your users.

Something to keep in mind when styling for print would be to keep things to a minimal. When a user wants to print the contents of a Web site, usually they’re going after the content. Of course this applies to separate situations in very different ways and each project is unique. There will usually be certain elements that should be included in the print version of the site that are specific to the project. It is up to the developer which elements to include, but thought should be put into the decision.

Controlling your Elements for Print

As previously stated, the control held over each element in your document is what makes CSS so effective. Design for screen is significantly different that design for print. Much of any design is only useful for the screen, and by that I mean forms, site navigation, images which are part of the design, and in certain circumstances the colors used on the site.

As you are going through your design, each element should be examined and you should ask yourself whether or not the element belongs on a hard copy. Within your stylesheet you can simply set display:none; to remove the element from your print version.

Once you have written your print stylesheet you can include it as follows:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Site Navigation is Useless on Paper

First and foremost, one of the most useless elements of any Web site hard copy is the site navigation. Including the site navigation in the print style clutters the document with an element that can not be used once printed on paper. I find it difficult to imagine a circumstance in which it would make sense to include the site navigation.

While the main site navigation is useless for hard copy, there are other navigational elements that could be useful on screen. One related element that could be worthwhile to include in the printout would be a breadcrumb trail which would guide the user back to the document in the future.

Leave out HTML Forms

Another completely useless element of design for print would be forms. Understandably it may be useful to include a specific form for a specific client in a specific circumstance, although that will be rare. HTML forms are meant to be filled out on screen and their data submitted in the manor you intended. A user can not fill out a form on paper and submit the data, so not including them for print will give you that much more real estate to work with.

Various Other Design Elements

Ultimately it is the developers decision what to include and what to leave out. It is important to make the most effective use of a print stylesheet and only include those elements which are essential to the print. Anything related to content should be included, while much of what is related to design can be left out. I am not saying that a printout of your site should have no associated design — you should retain the look and feel of a printed page. It is up to the developer, however, to use good judgement when writing the print style.

Something to keep in mind should be that different browsers treat the width of a page in alternate ways. You should not be aiming to find a ‘wrapper’ container for you content, it should flow regardless of the margins it is printed within.

Styling for print is one of the situations in which it is proper to use px or pt font sizes, which is not the case when you are aiming to effectively style for the screen. Printers recognize pixel units and point units as one in the same so it is okay to style using them.

The colors you are using in your design are important to consider. You need to keep in mind that the content will be printed on white paper, and the text needs to have enough contrast to be readable. More often than not the background should be white, and the text black, as to not waste colored ink on an article written in the color red.

Element Reorganization for Print

In most cases, many of your design elements will not be present in the print version. This creates a situation in which the minimal design for print must be examined and designed in itself. Although limited, you can maintain the look and feel of the site with your font, accent color, and image choices.

Classes Which Hide from Print

A popular technique for developers from time to time is to include a class such as "noprint" or something of the like which would in turn have a display:none; property only in the print stylesheet. This would effectively hide this element from the print version, and allow it to be visible for screen. From time to time this can be used very effectively, but should be kept to a minimum to ensure a universal look and feel for the print version of the entire site. Most of the hiding and showing should be done in the stylesheet, not in the source. I say this because essentially when using this technique you are controlling the design in the markup and not the CSS, and that can be difficult to maintain site wide.

Printing your Links

It was in an article by Eric Meyer published to A List Apart where I first began to read about good style for print. What really struck me was his technique for printing URLs and using the benefits of CSS2’s :after. It allowed the developer to include both the link text and it’s associated URL strictly for print which makes a lot of sense. That way a user would be able to read the content on paper, and type in a Web address should they choose to do so. I suggest taking a look at that article and reading more about the technique because it truly makes a lot of sense.

Printing Images

Something to keep in mind when styling for print, is that any background-image can be assumed invisible on the print versions. Yes, there are browsers that will print background images, but others do not. This is actually beneficial because any images that are part of your design should be included for screen using background-image and do not belong in a print version anyway.

Need to Print a Background Image?

There are certain cases where developers insist on printing background images, and there have been some workarounds written about. In my personal opinion, if an image deserves to be printed, it is part of the content. If an image is part of the content it should not be included as a background-image. To accept a solution such as a list-style-image implementation takes away from the semantics of the document and in my opinion should be avoided. To me it is basically a CSS hack, which can degrade the logevity of your code.

The Great Logo Debate

This is a long standing issue among developers, as opinions vary regarding the circumstances. Is the site logo a design or contextual element? While the logo often relates to the site design very carefully, it is something many want to include in print. The logo can carry much of the look and feel itself, and in my opinion should definitely be included in the hard copy.

What about the Semantics?

The debate comes in regarding the semantics of logo inclusion. Is the logo a design element? If so, a new solution would be needed to include for print due to the background-image printing issue. Is the logo content? In that case the logo can be included with an img tag and printed easily.

Personally, I have chosen the latter and included a print logo version in my markup and stylesheets. It allows for my print version to be easily recognized as an article from Monday By Noon and is enough to carry the look and feel in my opinion.

Testing your Print Stylesheet

Testing your print version is as easy as checking out the print preview of your document. From there you are able to see what the printer will output without having to waste the paper and ink. As it may be an obvious point, some may not realize that the print preview of the browser will apply your print stylesheet.

Throughout my testing of print styles, I have noticed a few shortcomings of the rendering engine in each print preview. At certain points, usually surrounding links, the text becomes jumbled and overlaps one another. From time to time characters or even whole words are missing. The actual print, however, does not exhibit these characteristics, so don’t take the print preview completely seriously.

Finishing Things Up

I would like to leave things open for discussion. I’d like to get the opinions of other developers on the contents of this article. I would especially like to hear comments regarding The Logo Debate and hope to get some input regarding the issue keeping semantics in mind.

If the project you are working on is for a client — show them the print style. Chances are they have no idea what CSS is and could care less — but they will put value into the fact that they have a great looking print version of their site. No need to get into how it works, just show them.

All in all, the print stylesheet can be a very effective addition to your design if it is used properly. Allowing your site to be as valuable on paper as it is on screen isn’t something to be taken lightly.