Printer Friendly Links Using CSS
I have been looking at ways to improve the printer friendly version of my site lately.
Once printed, URLs of links aren't printed, and sometimes that's not a good thing.
I was thinking about listing all the URLs at the end of page and hiding them with by turning off their visability on the master CSS file, and only having them visable using the print CSS file.
However, I came across an interesting article on A List Apart called Going To Print. This suggested using the power of CSS2 and CSS3 to show the URL as part of the link. For example, a this link...
would become...
A List Apart (http://www.alistapart.com/)
Mozilla based browsers such as Firefox implement CSS2 and some of the CSS3 recommendation specification. Unfortunately Microsoft's Internet Explorer doesn't, so this won't for users wanting to print from that particular browser.
To add the URL after the link text, we have to use the CSS2 pseudo-element
selector :after. For printer friendly version of my site, I only
want links that are part of the mainbody class to be expanded.
.mainbody a:link:after, .mainbody a:visited:after {
content: " (" attr(href) ") ";
font-size: 80%;
font-family: Courier, sans-serif;
}Here I'm making sure any visted or unvisited links are treated equally when being selected by the stylesheet. I'm adding the value of the href attribute, surrounded by brackets, to the content of the element. I'm also using a fixed width font and shrinking the text size down a bit.
This is fine, but unfortunately if I use relative links on the page it gives me results like
Rob's Blog (/robblog/)
instead of
Rob's Blog (http://www.robertprice.co.uk/robblog/).
This is where CSS3 comes to the rescue. We can use a conditional attribute
selector to see if the href attribute starts with /.
If it does we know it's a relative link and we want to prefix the URL with
http://www.robertprice.co.uk. We do this using the following
bit of CSS.
.mainbody a[href^="/"]:after {
content: " (http://www.robertprice.co.uk" attr(href) ") ";
}The downside of using CSS3 is that it is not a finalised standard, and as a result breaks the W3C's CSS Validator.
We can put this in a printer only stylesheet using HTML like this, ensuring the media attribute is set to print
<link rel="stylesheet" href="/includes/printstyle.css" type="text/css" media="print" title="printer stylesheet" />