Well, this is a way to improve the HTML pages when users want to print them.
First, when you link your CSS, you can choose the media you want for apply. For example:
<link rel="stylesheet" media="screen" href="style.css"
type="text/css"/>
<link rel="stylesheet" media="print" href="style-print.css"
type="text/css"/>
As you see, in media attribute you can choose for which media you want to apply it. This is useful for hiding the sidebar or header or what ever you want ;), using the property “visibility: hidden; “.
But we can do more “effects”. We have another problem (and its solution) when you print technical articles: you cannot get the value of the href attribute of links (remember, tag <a>). So, we could execute an small JavaScript function for generate that info and it’s only visible when you print:
function doLinks() {
var savedLinks=new Array();
var cont=1;
var links=document.getElementById("divText").getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
savedLinks[cont-1]=links[i].getAttribute("href");
var newNode=document.createElement("span");
newNode.setAttribute("class","jsLinkNumber");
newNode.innerHTML=" ["+(cont++)+"]";
links[i].appendChild(newNode);
}
var listLinks=document.createElement("div");
listLinks.setAttribute("class","jsListLinks");
var list=document.createElement("ul");
for (var i=0; i<savedLinks.length; i++) {
var elem=document.createElement("li");
elem.innerHTML="["+(i+1)+"] "+savedLinks[i];
list.appendChild(elem);
}
listLinks.appendChild(list);
document.getElementById('main').appendChild(listLinks);
}
<body onload="doLinks();">
We only find links in the “divText” div, because we don’t want to include links from sidebar, header, etc. And don’t forget to set the jsListLinks class in both css.