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:
- 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 thehrefattribute). - We used the
:afterpseudo-element to insert the generated string after the main content of the matchedaelement. Note, however, that we're using the CSS3 grammar, so the pseudo-element should be written using the double-colon notation (::afterinstead of:after). - We used the
contentproperty to insert the generated string. More precisely, this property inserts:- an opening round bracket, followed by
- the value of the
hrefattribute (returned by theattr()function), followed by - 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:
- Loop through all the instances of the
aelement in the document. - Get the
hrefattribute. - If the
hrefattribute contains the stringhttp://, then- Create an element to store the value of the
hrefattribute, plus the parentheses. - Append the newly created element to the matching
aelement.
- Create an element to store the value of the
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.
