Optimize Your Links For Print Using CSS: Show The URL
When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts simply show the link as text with an underline. What good is that?
Providing URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.
The CSS Code
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
The pitfall of this method of displaying links URLs for print is that Internet Explorer ignores this code. If showing link URLs is critical, I'd recommend using a javascript alternative. If not, add this snippet to your print stylesheet to make your page print-outs more informative.
Click here for an example!
- Login or register to post comments
- 5141 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Chris Coyier replied on Fri, 2008/02/29 - 11:23am
#main-content a:after { content:" [" attr(href) "] "; }
...in your print stylesheet. This also assumes that you aren't already hiding your menu in the print stylesheet, which can also be a good idea.
David Walsh replied on Fri, 2008/02/29 - 11:36am
bryan migliorisi replied on Fri, 2008/02/29 - 1:29pm
One line of jQuery is all you need. This uses the same approach as noted above by Joe, only it is done client side.
$('a').each(function(i,e){$(e).html($(e).html() + "<span class='print-only'>"+this.href+"</span>");})
In your screen CSS:
span.print-only {display:none;}
Joe Lippeatt replied on Fri, 2008/02/29 - 2:09pm
in response to: bryanmig
bryan migliorisi replied on Fri, 2008/02/29 - 3:29pm
in response to: ext237
Thanks.
And sure, it could be modified in any number of ways since jQuery uses CSS3 selectors. We could take it one step further and easily turn it into a jQuery plugin.
I know it could be done in any framework, or with pure JS but I am a big fan of jQuery so thats why I do it this way.
Michele Moore replied on Fri, 2008/02/29 - 4:02pm
This is SO timely.
Just yesterday, I had to print out a purchase receipt after buying an online service. It had links on the online receipt to places where I could get developer docs, find the control panel, and get support. But of course I just printed it out for my files thinking I'd be able to find the links if I needed them.
Only the underlined text printed out, of course. Oh, and the links were not present in my confirmation email, which was just dumb. I had to do a really difficult search to get back to the online version of the receipt, then bookmark those links.
I would not have minded being able to just type them in from paper considering how long it too me to find the receipt.
Andrew Fleming replied on Thu, 2008/03/06 - 1:51am
Chris Coyier replied on Thu, 2008/03/06 - 10:07am
David Walsh replied on Thu, 2008/03/06 - 10:19am
@Andrew & Chris: That's right, Chris. Since you don't always know what directory the page is in, javascript would be the best way to go.