Print a website without printing the link locations?

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.

What browser, platform. Is this not something you set up yourself in the print setting of the browser? — mplungjan, Aug 13 '10 at 11:36
I edited to add more info! I can't find anything under the printing options to avoid this. — Adirael, Aug 13 '10 at 12:04
On all pages, or only on your page? Can you install WebDeveloper or Firebug and scan all CSS - or perhaps someone in your IS department installed a user CSS ? — mplungjan, Aug 13 '10 at 12:38
Just installed FF 3.6.8 Definitely not default behaviour and since you see it in Chrome too, it is somewhere in your page for sure. Do you have a url? — mplungjan, Aug 13 '10 at 12:41
That's true! Finally was a problem on my CSS, I'm using drupal and a module was injectin' it's own CSS with the code described below, thanks! — Adirael, Aug 13 '10 at 13:21
It seems like a common annoyance among libraries like Drupal, Bootstrap, Foundation, HTML5 Boilerplate etc to add this ridiculous "url text" to links on printing. [See this question too.](http://stackoverflow.com/q/7301989/1134080) *(Why are they all doing this? Who decided this is useful? Whatever happened to the WYSIWYG principle? /rant)* — ADTC, Nov 01 '16 at 11:32

score 46 · Answer 1 · answered May 28 '12 at 08:27

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.

Doesn't Work on FireFox. :( – Sizzling Code Dec 24 '14 at 06:38 — Sizzling Code, Dec 24 '14 at 06:38

score 23 · Accepted Answer · answered Aug 13 '10 at 11:38

23

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.

answered Aug 13 '10 at 11:38

mplungjan

169,008
28
173
236

2

I understand - but the behaviour you are describing is something explicitly put into the page you are looking at. To avoid this behaviour on that page - remove it if it is your page, use a userCSS in the browser if it is not. – mplungjan Aug 13 '10 at 12:35
1

The code wasn't appearing on Firefox, but I decided to start turning off different modules that I got enabled (it's a Drupal system) and a module was injecting a print.css with that code. Thanks a lot :) – Adirael Aug 13 '10 at 13:22
Great - and thanks for the question - it showed me something I was not aware of in CSS2 :) – mplungjan Aug 13 '10 at 13:38
Here it is in case someone else want to look http://drupal.org/files/issues/print.css_.txt sourced from here http://drupal.org/node/116482 which funnily enough references my listapart link – mplungjan Aug 13 '10 at 13:40

score 14 · Answer 3 · answered Nov 29 '13 at 10:02

14

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!

answered Nov 29 '13 at 10:02

Dajo

140
1
4

1

Works in FF 29, but not in Chrome 35 – Jeroen K Jun 28 '14 at 14:36
Worked on Chrome Version 94.0.4606.81 (Official Build) (64-bit) – Jimson James Oct 15 '21 at 15:26

score 8 · Answer 4 · answered Aug 01 '14 at 15:51

Currently using the content property should work in all major browsers.

    @media print  - or -  <style type="text/css" media="print">

    a:link:after, a:visited:after {  
        content: normal; //TODO: add !important if it is overridden  
    }

More options here: CSS Content.

More usefull ways of using the content attribute here: CSS Tricks

score 5 · Answer 5 · answered May 31 '13 at 22:27

5

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: "";
}

answered May 31 '13 at 22:27

coloradoblue

625
7
11

score 5 · Answer 6 · answered Jun 28 '14 at 14:41

5

I found the other solutions don't work (anymore) cross-browser. The following works in FF 29, Chrome 35, IE 11:

a:link:after, a:visited:after {  
  content: normal !important;  
}

answered Jun 28 '14 at 14:41

Jeroen K

10,258
5
41
40

2

Sadly it looks like the asker no longer uses SO, but this should be the accepted answer. – kalenpw Dec 03 '19 at 23:04

score 4 · Answer 7 · answered Jan 22 '15 at 13:44

4

For anyone using Bootstrap 3, the selector used is:

a[href]:after { }

And can be overriden with something like:

a[href]:after {
   content: initial;
}

answered Jan 22 '15 at 13:44

Mike Chelen

402
4
9

score 1 · Answer 8 · answered Jun 09 '13 at 15:31

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

score 1 · Answer 9 · answered Jun 18 '15 at 22:10

1

While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.

Remove Footer Links in Chrome Print View

That's it.

answered Jun 18 '15 at 22:10

Mohd Abdul Mujib

13,071
8
64
88

This question has to do with removing hyperlinks associated with navigation elements in the body of the webpage when printing. It is a completely separate issue from the file path in the headers/footers, which are added in for print and can be turned off. – code-sushi Sep 18 '15 at 17:32
1

@code-sushi you are correct, I misunderstood the question, but still I'll leave my answer since it may prove helpful for someone who is searching for removing the links in header and footer, since the question text may be relevant. – Mohd Abdul Mujib Sep 19 '15 at 06:05

score 1 · Answer 10 · answered Aug 13 '10 at 11:40

1

Use additional CSS for print.

See here: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

answered Aug 13 '10 at 11:40

Mchl

61,444
9
118
120

But according to what is described, the page that is being printed has been set up to print the HREFS. Sounds like if the asker has control over the css, the href CSS can just be removed rather than a specific stylesheet applied. Some browsers can however override the css with a user css. – mplungjan Aug 13 '10 at 11:43

score 0 · Answer 11 · edited May 23 '17 at 12:00

0

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?

edited May 23 '17 at 12:00

Community

1
1

answered Jul 30 '14 at 22:40

Clinton Green

9,697
21
68
103

score 0 · Answer 12 · answered Dec 23 '14 at 18:08

I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...." hopefully it will help

score -1 · Answer 13 · answered Jun 17 '15 at 11:51

-1

Every browser having setting of printing header and footer ,and background graphics If you disable this setting of printing header and footer then it will not show on your print page

answered Jun 17 '15 at 11:51

Pradip Daunde

381
2
5

Print a website without printing the link locations?

13 Answers13

Linked