Handy Tips for Creating a Print CSS Stylesheet

Handy Tips for Creating a Print CSS Stylesheet

Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site.

For this example, we’ll be going through the process of building the print stylesheet for Line25. Being a design blog there’s plenty of articles that users might want to print to refer to; for instance a user might want to print a tutorial to save switching applications; print an article for a meeting; or simply rest their eyeballs from the computer screen and read in bed.

Adding some Fancy Styling

With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use, which all helps save the world. Captain Planet would be proud! Now we can take a look at styling up the text to make things look pretty. It’s a common fact that sans-serif typefaces are the most legible in print, so setting the global font to Georgia is a good start. Those blue links aren’t really too useful, so we can also target those and set them to black.
Finally, the H1 and H2 introducing the page could be simply styled using the font-size, font-style and text-align properties. There’s no need to go to town on colours, keep everything basic and economical for the printer by using structured heading sizes and subtle touches.


#header h1 {
	text-align: center;
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

Print preview with added styling

Display Link Destinations

You obviously can’t click links on a printed page, so it would be quite handy to display the URL in the printed document so the user could follow up the link when back at the computer. This nifty trick uses some CSS magic, but unsurprisingly it doesn’t work for IE. By using the :after pseudo selector, we can add the attribute from the anchor as small text in brackets after each link.


#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

Print preview with links displayed

Split Comments Onto a Separate Page

On one hand, it would be more economical to simply add the comments to the hidden elements to save a number of extra pages being printed. But on the other, there’s often a good collection of tips, resources and advice from people adding their input to an article. With this in mind the simple page-break-before property comes in handy to push the start of the comments onto a new page. This means the user can then decide whether to print the full document, or exclude the last few pages of comments.


#comments {
	page-break-before: always;
}

Print preview with separated comments

The Final Stylesheet

So, that’s it! A few handy tips for creating your own print stylesheet. The complete stylesheet for Line25 is made up of just a few lines of CSS, but it completely transforms the printed document into a more useable and readable piece of information.


body {
	font-family: "Georgia", Times New Roman, Serif;
	color: #000;
	background: #fff;
}

#nav, #side, #footer, .post-meta, #respond, .reply, .post-info {
	display: none;
}

#header h1 {
	text-align: center;
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

#content h2 {
	font-size: 32pt
	font-style: italic;
}

#content h3 {
	font-size: 18pt;
	margin: 0;
}

a {
	color: #000;
	text-decoration: none;
}

#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

#comments {
	page-break-before: always;
}

ol.commentlist li {
	list-style: none;
	border-bottom: 2px solid #eee;
	margin: 0 0 10pt 0;
}
	ol.commentlist li div.comment-meta {
		font-size: 6pt;
	}