Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

Finishing Touches: Prettier Printing

I rarely print web pages myself, but it’s well worth making sure your site looks OK on paper; too many sites waste ink on unnecessary clutter or spill over the edge. There’s no need for separate ‘printer-friendly’ pages, just a simple style sheet that can usually be put together in minutes.

Firstly, make sure all the styles used for screen display are also applied to the print medium, and add a separate style sheet applied only to print, e.g.:

<link rel="stylesheet" type="text/css" href="/_template/css/screen.css" media="screen,projection,print" />
<link rel="stylesheet" type="text/css" href="/_template/css/print.css" media="print" />

Then look through your page template, work out which bits aren’t worth printing out (mostly navigation areas) and hide them with display:none in the print style sheet. This site uses:

#barTop, #logo, #nav, #barBottom, #up, #ads, form
{
	display:none;
}

If your design uses a variety of text colours you’ll want to set everything to black, and maybe adjust the font sizes if they seem way off on paper.

Apart from that, the main thing is to make sure the layout isn’t wider than around 650 pixels. For this site the content area has to be narrowed and the right-hand column dropped down to the bottom, and as the box backgrounds won’t print out a border’s added:

/* narrower central content area */
#content
{
	width:550px;
}
/* don't float the left-hand column */
#column1
{
	float:none;
}
/* don't float this either, so it drops underneath */
#column2
{
	float:none;
	padding-top:30px;
	margin-left:10px;
}
/* add a grey border to the right-hand boxes */
#column2 .box
{
	border:1px solid #cccccc;
	width:208px;
	w\idth:206px;
}

It’s not worth agonising over every detail of how every page prints out in every browser (Firefox’s printing still seems rather buggy), or making major changes to the markup, but every site should have a print style sheet.


Comments

I went ahead and put this on my site, nice and easy. Funny how many people opt for the scripting approach to this. Or perhaps not so funny given that I didn't even know about it.

— Greg, 14th Jan, 6:54pm


Comments are now closed for this entry.