Don’t forget about printing!

No doubt: It’s the digital era. Meanwhile almost everything can be consumed on a tablet computer. Analog content – traditional paper – is pushed back more and more. Sometimes it seems toilet tissue is the only real paper still used. But to keep down-to-earth: not everybody has an iPad or a similar device and many, many pages are still read offline, whether they are bought or self-made by printing. That’s why it’s still important that every website that features a certain amount of text offers at least a basic print stylesheet.

It ensures that content doesn’t simply flow out of the printer like it looks on your computer screen, but is optimized for an offline consumption. On occasion of my recently published article about print stylesheets for Smashing Magazine I have also added one to css3files.com and want to guide you through the creation process in the following.

Setting up a print stylesheet is no big deal. Just wrap everything (except media queries) in your main stylesheet into @media screen {...} and subsequently add another rule that holds the styling for the print output:

@media print {
	...
}

As a little preparation the media type at the call for the stylesheet in your <head/> must be omitted: <link rel="stylesheet" href="css/style.css"/>

Alternatively you can also use a different css file for the print styling and skip the above steps to keep things separated. That’s the way I follow at css3files.com – have a look at my print stylesheet.

The supreme goal for a stylesheet for printing is to present the content in a clear and uncluttered way. Therefore we first hide all unneeded page elements, like the header, the footer and sidebars that contain nothing else but links. We could also consider to drop images, since they can empty an ink cartridge pretty fast.

header, footer, aside, img {display: none}

If images are important for the meaning of the text leave them as is, but at least limit them to a certain width with max-width so that they don’t bust the layout.

article img {
	display: block;
	max-width: 500px;
	height: auto;
}

Furthermore the height is preventively set to auto so that the aspect ratio is maintained and display:block ensures that they reside in their own line.

Next we take care about the general appearance of the text. The standardly used Times New Roman in browsers for printing is just fine, but let’s pretty up everything through the application of Georgia. Furthermore the text size is set to 12pt, the line-height to 1.3 and – for good measure – the background to white and the text color to black.

body {
	font: 12pt Georgia, "Times New Roman", Times, serif;
	line-height: 1.3;
	background: #fff;
	color: #000;
}

The rest of the textual elements is handled pretty nice by default, but you also could make headings a little bigger, adjust the margin of lists or give blockquotes an italic styling. For normal quotes (<q/>) however the quotation marks should be switched off to get constant results across browsers:

q {quotes: none}
q:before, q:after {content: ""} 

What about links? They are a great thing to guide users through your site or to other sources, but the impossibility to click on them on a sheet of paper makes them pretty useless in this environment. To provide remedy there is the possibility to attach the URLs after the links so that the users can see where they once led. The :after pseudo-element is the weapon of choice for this purpose as it inserts the URL right after each link. Internet Explorer < 8 doesn't support it but who cares these days?

a:after {
	content: " (" attr(href) ")";
	font-size: 80%;
	word-wrap: break-word;
}

Additionally we set the font-size to 80% so that it doesn’t get too disruptive and word-wrap takes care of long URLs (i.e. it stops them form bleeding out of the page). To just treat external links like this use the a[href^="http://"]:after selector instead. Of course it’s pretty painstaking to manually type in an URL into your browser and the reading flow can get fairly disrupted with many links within a block of text. So the use of this technique should be well-considered and applied sparingly.

Meanwhile we have a nice, clean print output that presents the content in the best possible way. Now’s the time for some eye-candy. Wouldn’t it be nice to have a sleek header for the printout that states where things are coming from? Your wish is my command. Again the pseudo-element :after gets applied to insert a little message after the <header/> tag.

header.gen:after {
	font-style: italic;
	content: "CSS3 propertys explained. A project by Christian Krammer.";
	font-size: 10pt;
}

Furthermore the main heading is enlarged so that it clearly represents the title of the site.

header.gen h1 {
	display: block;
	font-size: 30pt;
	margin: 0;
}

Alternatively you could also use the logo for this purpose. Bring it back to display (in case images have been hidden before) and hide the <h1/> from above.

Of course the print stylesheet of css3files.com is more extensive since I not only have to treat the articles but also the CSS3 properties pages. But basically that’s the bottom line on the way to a proper printout. Since it's no big effort there is no excuse to not have at least a simple one.