Améliorer l’impression de vos pages web

Lorsque vous imprimez une page web contenant des liens, vous obtenez une page avec les liens sont imprimés certes, mais vous aurez beau pousser avec le doigt sur un lien, il n’ouvrira pas une autre feuille.

On perd les adresses des hyperliens, on perd de l’information.

A List Apart s’est penché sur la question et nous propose 2 solutions. La première utilise les sélecteurs CSS2, la seconde, plus propre et plus poussée utilise un peu de javascript.

Impression des liens avec CSS2

Il s’agit de 2 règles simples à ajouter à votre feuille de style d’impression.

#content a:link:after, #content a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
	}

On ajoute l’hyperlien après le lien, entre parenthèses, et on réduit sa taille à 90% pour le rendre moins gênant et le différencier du reste du texte.

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

On transforme les liens internes relatifs en liens absolus.
ex: /photos/ devient http://nophysic.com/photos/

Attention néanmoins, ^= est un sélecteur CSS3.

Impression des liens avec Javascript

Nous allons utiliser du javascript pour récupérer les hyperliens, les placer dans une liste ordonnée, et placer cette liste sous le contenu. Chaque lien sera affublé d’un indice qui correspondra au numéro dans la liste.

Vous pouvez récupérer le javascript sur la page officielle de Footnote Links.

Placez le sur votre page, et cachez les liens si on ne demande pas l’impression, dans votre feuille de style.

.printOnly {
	display: none;
}

Vous pouvez même combiner cette méthode à la précédente, en spécifiant le CSS2 suivant, pour le cas où le visiteur n’aurait pas de Javascript.

a:link:after,
a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
}
 
html.noted a:link:after,
html.noted a:visited:after {
	content: "";
}

J’ai adopté cette solution sur ce blog même, aussi pouvez-vous observer le résultat en demandant une impression et en regardant l’aperçu.

Pour les plus curieux qui ont remarqué que ce blog utilise le framework Mootools, je précise qu’il s’agit d’une conversion du code original pour Mootools.