J’ai récemment fait mon CV au format HTML. J’ai utilisé des liens sous forme d’image afin de faire un lien vers mon blog, mes comptes Viadeo et LinkedIn.

Le problème est que lors de l’impression de mon CV, l’image sera imprimée et la personne ne pourra pas aller sur mon blog ou mes comptes. La solution consiste à adapter l’affichage pour le média print (impression).

Pour cela, j’utilise une technique qui permet d’ajouter du contenu via CSS.

Voici le code de mon lien vers mon blog :

<a class="link" data-print-prefix="blog" href="http://royto.familleroy.fr/"><img height="36" width="36" alt="blog" title="blog" src="icons/blog.png" /></a>

Dans mon CSS, dans le cas d’un media print, je cache l’image de mon lien, puis je rajoute mon contenu via la propriété CSS content. Dans mon cas je récupére l’url de mon lien via l’attribut href que je place après ma balise « a » via le pseudo sélecteur :after (il est possible de le placer avant via le pseudo sélecteur :before).

@media print {
    a.link img {
        display: none;
    }

    a.link:after { 
        content: attr(href); 
    }
}

Ainsi l’image sera remplacée par l’URL de mon lien.

Dans mon cas, je récupère également un préfixe contenu dans une propriété data-*, attribut personnalisé nommé data-print-prefix. Je sépare le préfixe via  » : « . En effet il est possible de mettre du contenu en dur si on met le texte entre quote. Cela me permet de pouvoir avoir plusieurs liens que l’on peut différencier via le préfixe que l’on affichera avant le lien (compte facebook, twitter, linkedin, …).

Le code au final :

@media print {
    /* Modification du style des liens pour impression */
    a {
	color : #75B0D1;
	text-decoration : none;
    }
    
    /* Masquage des images en impression */
    a.link img {
        display: none;
    }
    
    /* Passage en block pour un affichage 1 lien par ligne */
    a.link {
	display : block;
    }

    /* Ajout des informations du lien */
    a.link:after { 
        content: attr(data-print-prefix) " : " attr(href); 
    }
}

NB : J’aurais pu me baser sur un autre attribut de mon lien comme title mais le but était de montrer qu’il était possible d’utiliser les attributs data-*.

Voici le résultat après impression :

Cette technique peut également être utilisée pour d’autres utilisation (ex : ajout d’un drapeau indiquant la langue du lien, icone indiquant si le lien redirige vers le site lui-même ou un autre site, …).