Print a website without printing the link location

Question

I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:

    Homepage (http://localhost)

To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!

EDIT: This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.

Answer 1

Seems you are printing a page with this styling from a CSS2 compliant browser

http://www.alistapart.com/articles/goingtoprint/

In a fully CSS2-conformant browser, we can parenthetically insert the URLs of the links after each one, thus making them fairly useful to anyone who has a copy of the printout and a web browser handy. Here’s the rule, which restricts this effect to the “content” div and thus avoids sticking a URL in the masthead:

#content a:link:after, #content a:visited:after {    
  content: " ("attr(href) ") ";    
  font-size: 90%;   
}

Try it out in a Gecko-based browser, like Mozilla or Netscape 6.x. After every link in the printout, you should see the URL of the link in parentheses.

Answer 2

So to avoid additional print-out of link information in a printed web page, add the following rules to the @media print section:

a:link:after, a:visited:after {
    content: "";
}

This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.

Answer 3

I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.

$('a[title="Show Profile"]').contents().unwrap();

More info here Remove hyperlink but keep text?

Answer 4

Adding this will help you to remove those unwanted links

<style type="text/css" media="print">
@page 
{
    size: auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}

Reading this will help

Answer 5

content: ""; does not work I use this:

@media print {
    .noprint {display:none !important;}
    a:link:after, a:visited:after {  
      display: none;
      content: "";    
    }
}

This works to disable!

Answer 6

My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.

body a:link:after, body a:visited:after {    
  content: "";
}