Displaying URLs of Links When Printing

Originally Posted July 7, 2004, by Seth Green

Back in May of 2002 Eric Meyer wrote a fantastic ALA article called CSS Design: Going to Print. Among other useful techniques, he described how using CSS2+ will allow you to display the href attribute of a link in the printed version of a page. However, this does not work in IE, and until I hear otherwise, everyone else uses IE. So... I got this idea after seeing NiceTitles by Stuart Langridge.

Using javascript and the DOM, we:

Append <span> elements after every link (we actually only do this to links within a particular <div>. I did this presuming that you may not want all of your nav links, etc. to be displayed).
Set said spans to have a CSS class that is only displayed when printed
Fill said spans with the contents of their associated <a> tag's "href" attribute.

code: <a href="http://www.sethgreen.net">My Site</a>

display (when printed): My Site

becomes

code: <a href="http://www.sethgreen.net">My Site</a><span class="printMe"> (www.sethgreen.net)</span>

display (when printed): My Site [www.sethgreen.net]

View the source to see the javascript and the CSS.

Examples

You must print or do a print-preview to see the following...

The following links SHOULD NOT display their href attribute when printed (that would be redundant as they are already spelled out):

The following SHOULD display their href attribute when printed:

Updates

8/7/2004

I originally used the following CSS in the screen stylesheet to hide the generated links from the screen:

.printMe {
	position: absolute;
	left: -9999px;
	width: 9000px;
	font-size: 1px;
	letter-spacing: -1px;
}

This technique hides the content from the screen but allows it to be read by screenreaders. However, Jeremy Keith kindly recognized that I would want to hide the generated links from screenreaders. They would get the relevant link information from the original <a> tag's atrributes and the generated URL text would therefore become redundant. So, I am now using this CSS in the screen stylesheet:

.printMe {
	display: none;
}

and this CSS in the print stylesheet:

.printMe {
	display: inline;
}