Developer

How to create CSS style sheets for printing

Learn how to use CSS to make a printed page look as good as your on-screen page. Justin James shows you what he did to make this work for one of his development projects.

I've been working on a personal project for some time called Rat Catcher. (You can read about my development work on the project in my 10-part series about the OutSystems Agile Platform.) The end goal of any usage of Rat Catcher is to produce a report, and it occurred to me that users might want to print their reports.

For a long time now, the sites I've worked on used fluid layouts that worked flawlessly with printers, but Rat Catcher is a different beast. In addition, I needed the printed reports to be better than just a page printout would normally be. It was time to learn how to use CSS to make my printed page look as good as my on-screen page. I'll show you what I did to make this work.

Ensure your HTML works well with CSS

The first thing to do is to ensure that your HTML works well with CSS. For Rat Catcher, here are the most important things I needed to do (which I had already done during the preparation for the new look and feel):

  • Wrap all of the content (including navigation, headers, footers, etc.) in a div.
  • Wrap the individual blocks in divs (header, footer, main content area).
  • Wrap a number of sub-components in divs (navigation within the header, the login information wherever it appeared, etc.).
  • Make sure that tables were only used for tabular data display.
  • All of the divs mentioned above need to have their own unique CSS class or ID.

This is all common sense, but it is really easy to forget about these details in the rush to get your application in front of people. For me, while some of it was already done up front, I did have to go back later on and update things.

Understand how the media types work in CSS

The next thing to do is to understand how the media types work in CSS. A media type defines the kinds of devices that a set of styles applies to, such as a standard screen, a mobile device, a printer, a projector, etc. If you just have a basic style sheet, your styles will apply to all media types (equal to the "all" media type). That being said, you can override the main style sheet on a per-media type basis, and also define styles specific to certain media types.

Here are the media types and their descriptions from the W3C spec:

  • all: Suitable for all devices.
  • braille: Intended for braille tactile feedback devices.
  • embossed: Intended for paged braille printers.
  • handheld: Intended for handheld devices (typically small screen, limited bandwidth).
  • print: Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
  • projection: Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
  • screen: Intended primarily for color computer screens.
  • speech: Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
  • tty: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
  • tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

With many of the media types, you can create an experience that is customized for disabled users who have a variety of devices to help them work.

Specify media type-specific style sheets

There are two ways to specify media type-specific style sheets. The first is to add a section in an existing style sheet using the media type separator. For example:

.class1 {

color: red;

font-size: 16px;

}

.class2 {

color: blue;

font-size: 20px;

}

@media print {

.class1 {

color: white;

}

}

All of the items in the "@media print" section override the items in the main style sheet (again, equivalent to media type "all") for any device that would be using the "print" media type. Anything configured in "@media print" that does not exist in "@media all" will not be available in "@media all" as you may expect. In a nutshell, each media type inherits from media all.

One alternative to putting media type specific information in a style sheet is to use a different style sheet for each media type. You can do this with an @import statement in a CSS style sheet by appending the media type at the end (for example, "@import url("printer.css") print"). Another alternative is to specify the "media" attribute on the link tag of the HTML that brings in the style sheet ("<link rel="stylesheet" type="text/css" media="print" href="printer.css">").

Use a device-specific style sheet

Now that we've seen how easy it is to make a device-specific style sheet, what should we do with it? While each application is a bit different, I can tell you some of the things I did with Rat Catcher.

I used display: none on many of my elements (like the navigation and login areas) to hide them; after all, those areas are useless on a printed page and just take up space. I also took the content section and, instead of having it centered with a lot of space on the side, I set it to a width of 98% with some small margins on the sides, and set it to stay on the left, as you would expect with printed text. There were a number of table styles with white-space: nowrap on the screen that I had to change to "normal" to make sure that tables with a lot of content did not run off the screen. I also made sure that the page's background was white (why waste toner/ink printing background colors?).

Summary

It took me about 15 minutes to take my existing page and morph it into something that prints well. While Rat Catcher is not suited to mobile devices, I would definitely use this technique in the future to ensure the right experience on smartphones and tablets as well.

Related reading: Try CSS media types to build printer-friendly pages.

J.Ja

Disclosure of Justin's industry affiliations: Justin James has a contract with Spiceworks to write product buying guides; he has a contract with OpenAmplify, which is owned by Hapax, to write a series of blogs, tutorials, and articles; and he has a contract with OutSystems to write articles, sample code, etc.

About

Justin James is the Lead Architect for Conigent.

Editor's Picks