Ultima modifica: 2 novembre 2009
Home > Materiali > Tutorial old > CSS per la stampa

CSS per la stampa

Autrice

Sandra Farnedi

Introduzione

I fogli di stile consentono di personalizzare la visualizzazione di una pagina web senza toccarne il codice HTML; è inoltre possibile utilizzare fogli di stili differenti a seconda del dispositivo di output su cui la pagina dovrà essere visualizzata.

Questa proprietà dei fogli di stile, si dimostra particolarmente interessante ai fini della stampa delle pagine web che sullo schermo si presentano con le caratteristiche tipiche di un ipertesto e quindi contengono menù di navigazione, collegamenti ipertestuali, effetti speciali di vario genere ecc. che non sono di alcun interesse per chi legge una pagina cartacea.

I fogli di stile per la stampa

Chi progetta le pagine HTML, deve tener presente che i suoi lettori potrebbero volerne stampare i contenuti senza sprecare inchiostro per riprodurre immagini o senza vedere il testo circondato da menù che, su carta, non hanno alcun motivo di esistere. E’ quindi opportuno preparare due (o più) fogli di stile che consentano di ottenere rese diverse a seconda del dispositivo di output utilizzato.

Gli stili possono essere definiti all’interno della pagina che li usa, ma, per non appesantire il codice HTML e per poter utilizzare gli stessi effetti su più pagine, è opportuno che essi vengano definiti in un file a parte. Il richiamo del foglio di stile può avvenire in due modi diversi: con la clausola @import che consente di nascondere gli stili ai browser che non li sanno gestire (es. Netscape 4 e Internet Explorer 4) oppure tramite il tag <link…> con il quale si dichiara di voler utilizzare il foglio di stile indicato.

Sia la tecnica “import”, che la tecnica “link”, offrono la possibilità, tramite il selettore “media” di dichiarare il tipo di dispositivo su cui il foglio di stile avrà effetto: se il selettore “media” non è dichiarato, il valore di default è media=”all” per cui gli effetti definiti nel foglio di stile verranno applicati a tutti i dispositivi.

Il codice

<style type="text/css" media="screen"><!-- @import "stili.css"; --></style>

è la dichiarazione di importazione del foglio di stile stili.css, con la precisazione che tale foglio di stile dovrà essere applicato solo quando la pagina verrà visualizzata su uno schermo (media=”screen”).

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

è la dichiarazione di linkaggio del foglio di stile print.css, con la precisazione che tale foglio di stile dovrà essere applicato solo quando la pagina verrà stampata su carta (media=”print”).

Vediamo ora quali sono gli effetti che è opportuno modificare quando si passa dalla visualizzazione sul monitor alla stampa su carta:

  • i link, non dovranno essere né colorati né sottolineati, a meno che non si desideri far sapere al lettore che sul sito esiste un approfondimento sull’argomento in questione
  • i menu e i percorsi a “briciole di pane” dovranno essere eliminati poiché su un foglio stampato il loro ruolo è assolutamente nullo
  • le frasi che abbiano l’unico scopo di rinviare ad un’altra pagina o ad un altro sito (es. “Visita virtuale della scuola”, oppure il deprecabile “clicca qui”) dovranno essere eliminate perché la loro presenza, oltre che inutile, potrebbe risultare addirittura fuorviante
  • i font dei caratteri potranno essere modificati per ottenere una migliore resa su carta: Verdana, Arial o Helvetica sono quelli meglio leggibili su schermo, mentre Georgia e Times sono più adatti per la stampa
  • le dimensioni dei caratteri su carta possono essere ridotte senza perdere in leggibilità
  • la collocazione delle immagini e la strutturazione della pagina vanno adeguate al formato A4 tipico delle pagine di stampa
  • inoltre, si potranno avere delle parti di testo presenti solo su carta e non su schermo (es.l’URL della pagina) e viceversa.

Quando si dichiarano i fogli di stile in un file HTML bisogna prestare attenzione a dichiarare per ultimi quelli per la stampa altrimenti qualche browser potrebbe applicarli in modo scorretto.

Inoltre, per evitare spiacevoli sovrapposizione degli effetti, è opportuno, importare il foglio di stile per lo schermo, ma è bene linkare quello per la stampa altrimenti alcuni browser applicano gli effetti di stampa anche allo schermo col risultato che dallo schermo sparisce tutto ciò che è stato dichiarato irrilevante per la stampa; i browser più recenti tuttavia, sono in grado di gestire anche le importazioni di molteplici fogli di stile.

A volte, però, può essere necessario mantenere alle pagine il loro aspetto grafico anche quando vengono stampate, in questo caso sarà comunque opportuno controllare che le dimensioni delle varie sezioni che costituiscono la pagina non si sovrappongano in fase di stampa ed eventualmente preparare un apposito foglio di stile che, tramite un posizionamento assoluto, collochi correttamente le varie sezioni della pagina stessa.

Esempio

Un esempio concreto di quanto esposto, lo si può trovare all’indirizzo http://www.itczappa.it. Provare a visitare il sito e a visualizzarne l’anteprima di stampa: se ne otterrà una versione fedele all’originale, che rientra però entro i limiti di una pagina A4.

La prima pagina del sito è praticamente priva di testo, ma contiene solo menu e link ad altri siti per cui una sua eventuale stampa potrebbe avere come unico scopo quello di riprodurne l’aspetto, pertanto si è mantenuta, anche su carta, la visualizzazione di tutti gli elementi ed è stato generato un foglio di stile printindex.css, che viene applicato solo a questa pagina, e che riproduce, in fase di stampa, quasi tutti gli effetti definiti per lo schermo, ma fa un lavoro di ridefinizione dei colori e di riposizionamento delle immagini per evitarne la sovrapposizione.

Per esempio si è intervenuti sulla posizione del logo del MIUR che col posizionamento usato per lo schermo sarebbe finito sovrapposto a quello dell’USR e si è cambiato il colore del carattere nella sezione piedipag, trasformandolo da bianco in nero.

Per lo schermo:

body {font-family: Arial, Helvetica, sans-serif, Geneva, Verdana;}
#miur { position: absolute; left: 20%;}
#piedipag {color: #FFFFFF;}

Per la stampa:
body { font-family: Times, Georgia, serif;}
#miur { position: absolute; left: 15%;}
#piedipag {color: #000000;}

Le pagine successive invece, contengono del testo che potrebbe valer la pena di stampare; è stato quindi definito per esse, un foglio di stile print.css che elimina dalla visualizzazione tutti i menù (nel foglio di stile per la stampa, a tutti i menù viene applicato l’attributo “display:none”), toglie la sottolineatura e il colore ai link e stampa, solo su carta, in fondo alla pagina, l’URL e l’indirizzo di posta elettronica del sito.

Quest’ultima scritta non viene visualizzata su schermo, e questo lo si ottiene tramite la definizione della classe chiamata .solostampa. La classe .nostampa, invece, viene utilizzata in maniera duale sulle parti di pagina che non si vogliono stampare, ma che devono invece essere visualizzate sullo schermo.

Per lo schermo viene quindi definita la classe

.solostampa {display: none;}

che, a fronte del seguente codice HTML

<br class="solostampa" /> <span class="solostampa">sito web: www.itczappa.it - e-mail: itczappa@itczappa.it </span>

non esegue il ritorno a capo e nasconde l’URL e l’indirizzo di posta elettronica; nel foglio di stile per la stampa la classe .solostampa non viene dichiarata, per cui non ha alcun effetto e di conseguenza vengono eseguiti un ritorno a capo e vengono stampati l’URL e l’indirizzo di posta elettronica.

Analogamente, se si vuole che parti di testo che vengono regolarmente visualizzate su schermo, non vengano stampate, si può definire, nel foglio di stile per la stampa la classe

.nostampa {display: none;}

che, a fronte del seguente codice HTML

<p class="nostampa"><a href="SIC/Presentazione.htm" title="Presentazione SIC">Presentazione dell'indirizzo S.I.C.</a> (elaborata dagli studenti del corso)</p>

ne eviterà la stampa su carta.

Un esempio pratico di quanto sopra esposto lo si trova alla pagina http://www.itczappa.it/pof/sic.htm e se ne possono vedere gli effetti confrontando quanto prodotto sullo schermo con quello che viene visualizzato dall’anteprima di stampa.

I tre fogli di stile a cui si fa riferimento si trovano agli indirizzi:

Riferimenti




Link vai su