Printing URLs with CSS and JavaScript

A CSS approach

Sometimes it's useful for the user to print the URLs of a web document. CSS provides an easy way to accomplish this task: CSS3 attribute selectors and generated content. Assume that we have a page with different types of URLs, say, relative and absolute. In our printed version we want to display only the absolute ones. After setting our style sheet for print, we could write the following:

a {
  color: #000;
}

a[href^="http://"]:after {
  content: " (" attr(href) ") ";
}

The result is shown in the picture below.

What we did so far is the following:

  1. We used the CSS3 attribute selector that matches an element when its attribute has a value that begins exactly with the specified string (in this case, http:// in the href attribute).
  2. We used the :after pseudo-element to insert the generated string after the main content of the matched a element. Note, however, that we're using the CSS3 grammar, so the pseudo-element should be written using the double-colon notation (::after instead of :after).
  3. We used the content property to insert the generated string. More precisely, this property inserts:
    1. an opening round bracket, followed by
    2. the value of the href attribute (returned by the attr() function), followed by
    3. a closing round bracket.

Unfortunately, Internet Explorer (versions prior to 8) doesn't support generated content, so we have to follow another approach by using JavaScript.

Using JavaScript

The first thing to bear in mind is that all the code we're going to write should be put inside a conditional comment, like this:

<head>
<!--[if lt IE 8]>
...
<![endif]-->
</head>

Second, our JavaScript code should perform the following operations:

  1. Loop through all the instances of the a element in the document.
  2. Get the href attribute.
  3. If the href attribute contains the string http://, then
    1. Create an element to store the value of the href attribute, plus the parentheses.
    2. Append the newly created element to the matching a element.

The code is the following:

function addURL () {
  var a = document.getElementsByTagName("a");
  for (var i=0; i < a.length; i++) {
 var url = a[i].getAttribute("href");
 if(url.indexOf("http://") != -1) {
   var span = document.createElement("span");
   var textURL = document.createTextNode(" (" + url + ") ");
   span.appendChild(textURL);
      a[i].appendChild(span);
 }
  }
}

Note

If you use anchors or relative URLs on your page, it's better to add && indexOf("yoursite/") == -1 to the main if clause of the script. This allows us to avoid problems in Internet Explorer 7 (and lower), because this browser considers relative paths and anchors as if they were written with the http:// prefix. Bear in mind that you have to change the string yoursite/ in order to select the main directory of your web site.

Now there's a problem: the newly created span element will be visible outside the print preview. We need to add a couple of style rules to solve the problem.

@media screen {
  a span {display: none}
}

@media print {
  a span {display: inline}
}

We've removed the span element from the screen by using display: none and then re-inserted it with display: inline for print. You can see the result in the picture below.

Leave a Reply

Note: Only a member of this blog may post a comment.