Steve Fenton

<< June | July | August >>

Wednesday, 7th July 2010

Despite all of the technological advances of the past 100 years, people still print web pages for many reasons. They might need to take some information into a meeting, find it easier to work off of printed instructions or even just want to frame an excellent blog article that has inspired them and put it on the wall next to their desk.

Whatever the reason, printing still happens quite a lot. One downside of the printed version of a web page is that the links don't work (obviously!), which leads to the second drawback, you can't tell where the links were pointing in the first place.

Well, here is a handy rule you can add to your print stylesheet to output the contents of each link if you want to show it on the printed page.

a:after {
    content: " [" attr(href) "] ";
}

When used on this hyperlink: 

<a href="http://www.stevefenton.co.uk/">Click Here</a>

...it will transform "Click Here" into "Click Here [http://www.stevefenton.co.uk/]". By adding this to your print-style-sheet, you can ensure that people have all the information they need.