Why would a css framework display link URLs on the print pages?

Question

I was just working on a site where we had to add the ability to print the pages. We noticed that the link URLs are plastered all over the page like bad graffiti.

After reading this answer, it seems clear that some framework I'm using (which isn't bootstrap or foundation, maybe material.io?) must be adding this in.

Why would this be a good idea? It seems that if the user wanted to print the page, they want a print out of what they are seeing, not a bunch of other random garbage. Googling around I mostly find lots and lots of articles about how to stop this behavior so at the very least it seems like something people are looking to get rid of by default rather than add.

My question is, who thought it was a good idea in the first place to deliberately add this, and why?

Also, if this question is better on another stack, let me know.

If you printed the page as it appeared on the screen, the links would be useless. The point of displaying the underlying URL in the print view is so readers can visit the link URLs, if desired. — Brett DeWoody, Jan 30 '18 at 20:14
When you say "*the link text is plastered*", what exactly is 'the link text'? — Obsidian Age, Jan 30 '18 at 20:14
@ObsidianAge, what I meant is the URL (or URL fragment) that the link represents. I'll update the question. — coblr, Jan 30 '18 at 20:47
@BrettDeWoody, I suppose that's reasonable and would be a fine answer if you want to add it. I guess I never thought that someone would use a print out to navigate a web site and would instead share or save the links they wanted electronically. I was thinking that a print out, in most cases, is just for the information that was on the screen (prices, body copy, barcodes, pictures, etc). Feels like all the link stuff is just clutter. — coblr, Jan 30 '18 at 20:54

Brett DeWoody · Accepted Answer · 2018-01-30T21:13:02.120

Many frameworks use an @media print query in the CSS to display the underlying URLs of the links on the page when the page is printed. The purpose of this is to display the URLs of the links on the page so readers can see/visit the links, if needed.

To do this, the CSS will contain an @media query along the lines of:

@media print{
  a:after{
    content:" (" attr(href) ") ";
  }
}

which has the effect of (emulated to work in the browser here):

body {
  font-family: Arial;
}

a {
  text-decoration: none;
  color: blue;
}

/* 
  This would be @media print to work for print
  Using @media screen here for demo purposes
*/
@media screen {
  a.print:after {
    content: " (" attr(href) ") ";
  }
}

<strong>Screen</strong>
<p>View the answer on <a class="normal" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages?noredirect=1#">Stackoverflow.com</a>.</p>
<br/>
<br/>
<strong>Print</strong>
<p>View the answer on <a class="print" href="https://stackoverflow.com/questions/48529735/why-would-a-css-framework-display-link-urls-on-the-print-pages">Stackoverflow.com</a>.</p>

Why would a css framework display link URLs on the print pages?

1 Answers1