Making your blog printer-friendly

by on

Certain visitors of your blog may want to print your articles. By default, most browsers will present a simplified version of your website for printing. Background images may be hidden, saving a lot of ink. But we can do better: usually people just want to print your content, not the entire website.

Printing things is not that common, so it’s really not worth it to spend much time worrying about how your website looks on paper. There are a few simple things that make a lot of difference, though!

Style for printing

Modern browsers support media queries, a way to limit part of your stylesheet to devices that match certain criteria. While this feature is most used to scale your website to the size of multiple devices, we can also use it to define print styles.

@media print {
	/* insert CSS for printing here */
}

We want these styles at the very bottom of our stylesheet: They have to override everything that we have defined before.

Older browsers

In case you want to support Internet Explorer 8 and lower (or prefer your print styles in a separate file), the alternative is using a link tag with media attribute:

<link rel="stylesheet" href="print-all-the-things.css" media="print" />

When using a separate stylesheet, you no longer have to use the media queries in the examples below.

Hiding unnecessary parts of the page

Usually you’ll want to get rid of everything except the content of your website. No header, footer, sidebar, sharing widgets, advertisements.. Most of this should be possible by changing your stylesheet only. You might want to introduce a few new classes to manage visibility, that’ll come in handy!

.print {
	display: none;
}
@media print {
	#header, #footer, #sidebar, .share, .ads, .no-print {
		display: none;
	}
	.print {
		display: block;
	}
}

Page margins

Another really simple tweak is the page margin. I prefer margins a bit wider than the defaults that Chrome gave me. Note that most browsers add some information in the page header and footer; Making the top and bottom margins a bit bigger helps separating your content from the page info.

@media print {
	@page {
		margin: 2cm 2cm 2cm 1.5cm;
	}
}