Client-side printer friendly webpage

I will here show how the CSS3 pseudo selector :target can be used to display printer friendly versions of static web pages, as well as how to combine it with other methods.

Let's start with the following file(s) where we use CSS2's media type:

HTML:
<body>
<div>
	<div id="navigation" class="noprint">
		...
	</div>
	...
</div>
</body>

CSS:
@media print { .noprint { display: none; } }

This simple example hides all elements with class .noprint when the page is printed. We can expand the example with the CSS3 :target selector like so:

HTML:
<body>
<div id="print">
	<div id="navigation" class="noprint">
		...
		<a href="#print">Print</a>
	</div>
	...
</div>
</body>

CSS:
@media print { .noprint { display: none; } }
#print:target .noprint { display: none; }

"#print:target .noprint" is now activated by going to page.html#print. The advantage of this is that users get to see a print preview in their browsers - and no scripting was necessary, neither on the client nor on the server - purely CSS!

Let's help the user more and bring up the print dialogue box if (s)he goes directly to #print:

HTML:
<body onload="load()">
<div id="print">
	<div id="navigation" class="noprint">
		...
		<a href="#print">Print</a>
	</div>
	...
</div>
</body>

CSS:
@media print { .noprint { display: none; } }
#print:target .noprint { display: none; }

Javascript:
function load() {
	if (location.hash === '#print') window.print();
}

Finally, we can use Javascript to help out clients without CSS3 support:

HTML:
<body onload="load()">
<div id="print">
	<div id="navigation" class="noprint">
		...
		<a href="#print" onclick="printPage();return false;">Print</a>
	</div>
	...
</div>
</body>

CSS:
@media print { .noprint { display: none; } }
#print:target .noprint { display: none; }
.doprint .noprint { display: none; }

Javascript:
function load() {
	if (location.hash === '#print') printPage();
}
function printPage() {
	document.body.className += ' doprint';
	location.hash = '#print';
	window.print();
}

The beauty of this is that the print style sheet will work with CSS2, and the browser preview will work with CSS3 or Javascript.

Demo: Print page Printer

P.S. Challenges:

The Back button may not function. Maybe a "back to full page" link should be provided (but not for @media print).
It may be tempting to merge the two last CSS rules, but this will break .doprint if e.g. Internet Explorer does not understand :target.
If printPage() is renamed print(), window.print() will be confused.
The id="print"-element has to contain all elements you want to hide or alter.

Update: Using CSS to display hidden content

Initially, I implemented a "back to full page" link basically by displaying this "hidden" element:

<p style="display:none" id="cancel"><a href="#">Cancel print preview</a></p>

A disadvantage of this is that the element is displayed when CSS is disabled. So I created a cooler trick, where CSS reveals the link! Here is the HTML:

<p><a href="#"><span class="reveal" title="Cancel print preview"></span></a></p>

The link here is hidden because the anchor tag has no content. I put the hidden text in the title attribute of a contained span tag. To display it, we can use the following simple CSS:

.reveal:after { content: attr(title); }

Here, CSS2 generates text content for the anchor tag (from the title attribute of the span tag), effectively revealing the link :-)

Tags: css, javascript

Created on Wed, 16 May 2012 20:00