Fogli di stile CSS per la stampa di pagine web

Spesso succede che, stampando una pagina, il contenuto viene tagliato sul lato destro. Ciò è dovuto al fatto che si portano in stampa contenuti "inutili" e la dimensione delle pagine web viene mantenuta "fissa". Se abbiamo una pagina web con menu di navigazione sulla sinistra ed andiamo a stampare tale pagina, avremo in bella mostra il menu ma parte del contenuto, sicuramente, sarà stato eliminato dal processo di stampa. Come mai? Non è stato realizzato, parallelamente al foglio di stile per la presentazione della pagina a video, un CSS adatto per la stampa. In questo articolo vedremo come realizzarne uno, con tutto il suo codice, partendo da una pagina già vista nelle lezioni precedenti, ma che rende bene l' idea di quello che vogliamo ottenere.

Cominciamo a visualizzare la nostra pagina di esempio. Se questa pagina fosse un sito realizzato e presente in rete, e la si stampasse, vedremmo su carta innanzitutto il logo, se ci fosse, al posto della scritta; il menu sulla destra (del quale su carta poco ci interessa); probabilmente nel footer la ripetizione dei link per la navigazione nello stesso sito ecc... Servono davvero? Non credo. Allora cosa "eliminare" dal passaggio video » carta? Tutto quello che non serve; in questo caso la testata (o il logo) ed il menu. Avremo soltanto il titolo dell' articolo con il testo.

Realizziamo il CSS per la stampa

Il collegamento di un file CSS per la stampa, avviene allo stesso modo di quello utilizzato per la visualizzazione a video, tra i tag head:

 
<link rel="stylesheet" href="/file.css" media="print" type="text/css" />  

Da notare subito dove è scritto: media="print"; stiamo preparando, appunto, un foglio di stile per un outpout cartaceo. Una piccola raccomandazione: NON utilizzare il metodo @import con un foglio di stile per la stampa, in quanto la pagina web "prende" la formattazione, anzichè di quella per il video, quella per la carta; scrivere solo come nell' esempio. Stabilito questo, possiamo procedere a creare il nostro codice vero e proprio:

body{margin:0; padding:0;}  
#header h1{ 
font-family: Lucida,Georgia, serif; 
font-size:26pt;}  
#col-sx h2{ 
font-family: Lucida,Georgia, serif; 
font-size:16pt; 
border-bottom: 1px solid red; 
margin-top:2em;} 
#col-sx p{ 
font-family: Lucida,Georgia, serif;  
font-size:12pt; 
margin-left:2em;
margin-right:2em; 
text-align:justify;}
#col-dx{display:none;} 
#footer p{  
font-family: Lucida,Georgia, serif;
font-size:9pt; 
border-top: 1px solid red; 
} 

I nomi che abbiamo assegnato ai DIV per il video, rimarranno uguali anche per il foglio di stile per la stampa. Cominciamo a vedere il nostro codice: abbiamo impostato a 0 il margine ed il padding del body. Poniamo il caso che vogliamo far stampare solo il nome del nostro sito; ecco, quindi, che dobbiamo dichiarare il nostro blocco, con H1: abbiamo assegnato un font con "serif" (che su carta rende molto meglio) ed una dimensione in pt (punti), più adatti per la stampa.

#col-sx h2: è il titolo vero e proprio del nostro articolo; vogliamo dargli un bordo rosso, inferiore, di un pixel ed una distanza pari a 2em dal margine superiore.
#col-sx p: questo è il codice vero e proprio che ci farà leggere sulla carta tutto l' articolo; di conseguenza abbiamo dichiarato un allineamento "giustificato"; un margine destro e sinistro pari, anche qui, a 2em.
#col-dx: come detto nell 'introduzione dell' articolo, non ci serve il menu, in quanto su carta non possiamo "navigare" come nel sito; quindi la cosa migliore è: display:none;. Non vogliamo la colonna destra. La stessa cosa avremmo dovuto fare se non avessimo voluto qualche altra parte della pagina. In ultimo il footer, che potrebbe contenere qualche scritta importante:
#footer p: oltre ad un font di 9pt, vogliamo anche qui una linea, in alto questa volta, rossa e sempre di 1 pixel. Questo è quanto. Adesso vediamo attraverso una immagine, come otterremo la pagina stampata.

Stampare i link

Se nel nostro testo della pagina web abbiamo qualche link, non possiamo certamente "intuirlo" attraverso la stampa; però possiamo far leggere dove conduce "quel" link, in una maniera molto semplice e con pochissimo codice nel foglio di stile. Poniamo il caso che un link "punti" al sito http://www.NomeSito.it. Per quanto riguarda la parte di codice nella pagina XHTML avremo:

<a href="http://www.NomeSito.it" title="Collegamento esterno">link</a> 

Per quanto riguarda, invece, il codice nel foglio di stile, scriveremo:

a:link:after{content: " [" attr(href) "]";}

Che vuol dire: stampa dopo (after) la parola linkata, il contenuto dell' attributo href; vale a dire che su carta avremo: link [http://www.NomeSito.it]. Questo non lo vedremo su IE, mentre lo possiamo vedere già dall' anteprima di stampa con browser quali Opera, Mozilla e FireFox.