Comment faire pour que l'impression d'une page web soit différente de ce qu'on voit à l'écran ?

Cela ne peut se faire qu'avec les CSS... Il faut savoir que ça ne marchera pas partout (par exemple, IE5-mac ne suivra pas), mais il ne faut pas se laisser engluer par ces vicissitudes d'arrière-garde :-))

La technique générale consiste à écrire une feuille de style spéciale pour l'impression (media="print") où on redéfinira tous les styles qui doivent changer. Pour découvrir le sujet dans sa généralité, on se reportera à l'excellente introduction de notre confrère openweb.eu.org. Nous ne reprendrons ici que les modifications à apporter à une page déjà faite pour n'en imprimer qu'une partie.

Ce paragraphe ne doit pas apparaître à l'écran, mais seulement à l'impression. Dans ce qui suit, juste le paragraphe sur la recette doit s'imprimer, pas la fin de la page. Noter que nous avons limité la largeur de l'impression.

La technique proposée consiste à placer tous les éléments de la page qu'on ne veut pas imprimer dans des blocs <div class="noprt">. Le bloc BODY de cette page va donc prendre l'allure suivante :
<div class="noprt">
   partie à ne pas imprimer
</div>
     
   partie du site à imprimer

<div class="noprt">
   suite à ne pas imprimer
</div>
Parallèlement, on crée (ou on modifie) une feuille de style interne pour demander à la classe "noprt" ne pas figurer à l'impression :
<style type="text/css">
    @media print { .noprt {display:none} }
</style>

Si on veut opérer d'autres changements à l'impression, on ajoutera les règles de style correspondantes entre les accolades dans la ligne @media print{...}. Les modifications ne se limitent pas à la disparition ou à l'apparition de certains blocs, mais on peut aussi en modifier les dimensions et l'agencement dans la page ; on peut aussi contrôler les sauts de page.

A titre de démo, essayez d'imprimer cette page (cliquez tout de même sur ce cadre avant d'essayer :-)). En dehors de IE5-mac, ça devrait fonctionner sur la plupart des navigateurs récents (IE5.5 et IE6 sur Windows, Mozilla...). Allez voir les commentaires dans le code pour voir comment nous avons appliqué cette méthode, et allez sur openweb.eu.org pour en apprendre davantage.

Charles