I found a cool trick in a post by Remy Sharp that appends the address of a hyperlink to the end of the link’s text when the page is printed. Unfortunately the trick only works in browsers that support the CSS2 pseudo selector :after. Firefox, Safari, Chrome*, Opera and now IE8 all support the selector. IE6 and IE7 don’t though and that is a huge percentage of users.

I came up with a way to achieve the same thing with IE6 and IE7 using jQuery and the proprietary IE events onbeforeprint and onafterprint though.

Live Demo | Download (HTML, CSS, JavaScript)

• I have only tested this successfully in IE6, IE7, IE8 RC, FF3.1 and Chrome 1.0
• I tried to test in Chrome 1.0 and it did not work. The only thing I can find is Chrome does not yet fully support the “content” selector.

Screenshots:

Before Printing:
 

After Printing:

(Only links that I have marked with the class print_link will have the address appended when printed)

jQuery:

First add a reference to the jQuery file. I recommend using Google’s CDN. After that the following is all that is needed:

<script type="text/javascript">
    $(function() {
        //Check to see if browser supports onbeforeprint (IE6, IE7 and IE8)
        if (window.onbeforeprint !== undefined) {
            //Since the browser is IE, add event to append link text before print
            window.onbeforeprint = ShowLinks;
            
            //Remove the link text since the document has gone to the printer
            window.onafterprint = HideLinks;
        }
        else {
            //The browser is not IE so attach a print style to append the link's text when printed
            $('head').append('<style type="text/css" media="print">.print_link:after { content: " (" attr(href) ")"; }</style>');
        }
    });

    function ShowLinks() {
        $(".print_link").each(function() {
            //Store the link's original text in the jQuery data store               
            $(this).data("linkText", $(this).text());

            //Append the link to the current text
            $(this).append(" (" + $(this).attr("href") + ")");                
        });
    }

    function HideLinks() {
        $(".print_link").each(function() {
            //Restore the links text to the original value by pulling it out of the jQuery data store
            $(this).text($(this).data("linkText"));
        });
    }         
</script>

Cool jQuery Functions Used:

• append(content) - Append content to the inside of every matched element.
• data(name) - Returns value at named data store for the element, as set by data(name, value).
• data(name, value) - Stores the value in the named spot.
• text() - Gets the combined text contents of all matched elements.
• text(val) - Sets the text contents of all matched elements.

Of course you probably want to add a more in depth print style sheet beyond just this tweak. I would recommend looking at Remy’s post as a starting place.

Be sure to checkout the live demo and download. Please let me know how you would improve this or if you find any bugs. Also, please let me know if it works on Safari and Opera.