Stampe perfette di pagine Web con i CSS

La stampa delle pagine web è da sempre un problema, per utenti e sviluppatori. Osservate la pagina che state leggendo. Ciò a cui siete interessati è innanzitutto il contenuto dell'articolo. Decidete allora di stampare la pagina per leggere tutto con calma. HTML.IT ha pensato a voi, per fortuna, e se data un'occhiata in alto vedrete l'icona di una stampante: un click e si apre una nuova finestra con il testo dell'articolo. Tutto ciò che nella pagina sta intorno al testo è scomparso: ecco a cosa serve fornire la versione stampabile di una pagina. Senza questo strumento sareste costretti a stampare tutto quanto compare sullo schermo (tabelle, banner, menu) con inutile spreco di inchiostro e ulteriori complicazioni se il layout non sta dentro i limiti di un foglio A4.

La funzionalità della versione stampabile di questo sito si basa sull'uso di ASP e di un database che contiene gli articoli. Non è difficile da realizzare e potremmo affrontare l'argomento in un prossimo tutorial. Ciò che vogliamo dimostrare è che si possono realizzare pagine "printer friendly" anche grazie al semplice ausilio dei CSS. Ecco come si fa.

Uso degli id

Show, don't tell: l'evidenza dell'esempio è meglio di qualunque parola. E allora osservate l'esempio allegato all'articolo. È la riproduzione di un classico layout tabellare. Una tabella in alto per barre di navigazione e banner, una tabella su tre colonne nella parte centrale.

Avviate la stampa della pagina. Se avete un browser recente (e decente) dovreste vedere sulla vostra pagina solo il contenuto della colonna centrale. Piccola nota: a differenza della pagina alternativa di HTML.IT, se l'articolo o il testo si estendono su più pagine, dovrete stampare le pagine singolarmente (ma non è un gran lavoro!).

Torniamo al documento. Ho assegnato alla prima tabella (<table>) e alle tre colonne della seconda (<td>) un identificativo (id="nome_id"): ogni elemento di un documento html può infatti essere identificato in maniera univoca con l'aggiunta di questo fondamentale attributo (per aiutarvi ho inserito delle note di commento nella tabella, ma potete sempre dare uno sguardo al sorgente html).

Bene. A questo punto entrano in gioco i CSS. È lì che stabilisco tutti gli attributi di visualizzazione della pagina, dunque anche dei quattro id usati con le tabelle. Ecco il codice del foglio di stile "schermo.css":

#tabsup {
 background : #F0E68C;
 font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding : 5px;
 border : 1px solid black;
}

#colsin {
 background : #2F4F4F;
 font : bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : Silver;
 border : 1px solid black;
}

#coldest {
 background : #2F4F4F;
 font : bold 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color : Silver;
 border : 1px solid black;
}

#colprinc {
 background : White;
 color : Black;
 font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
 line-height : 2.5em;
 border : 1px solid black;
}

Commentiamo:

1. In un CSS il nome di un id viene sempre preceduto dal simbolo del cancelletto
2. Per ciascun id si può definire un insieme di regole: colore di sfondo, attributi del testo, bordi, margini, etc.
3. Un id è simile in questo senso ad una classe, ma con una fondamentale differenza: una classe può essere applicata a più elementi nella stessa pagina, un id si riferisce a un solo elemento. In pratica, posso avere nello stesso documento: <p class="testo"> e <table class="testo">, ma se uso <table id="sfondo"> non posso più usare l'id "sfondo".
4. Per le dimensioni del testo ho scelto di usare i pixel (cfr. aticolo «Stabilire le dimensioni dei font in un CSS»): ciò mi garantisce un maggiore controllo, anche se forse a scapito dell'accessibilità.

Le magie della proprietà display

Perchè tutto funzioni abbiamo bisogno di un secondo foglio di stile, "stampa.css":

#tabsup { display : none; }

#colsin { display : none; }

#coldest { display : none; }

#colprinc {
 background : White;
 color : Black;
 font : 12pt "Times New Roman", Times, serif;
 line-height : 1.5em;
 border : none;
}

Come vedete ho riportato anche qui i nomi degli id. Per tre di essi ho settato la proprietà display : none

Così facendo è come se dicessi al mio browser: non mostrare questi id. Avrete capito che i tre id sono quelli che magicamente scompaiono al momento della stampa.

Ancora due dettagli. Per l'id colprinc (la colonna centrale della tabella) ho cambiato l'unità di misura del testo. Non pixel ma punti: per la stampa è questa la soluzione giusta. Infine, ho modificato anche la font family, passando a Times New Roman.

Un CSS per ogni medium

Siamo giunti al momento di collegare i fogli di stile al nostro documento. Trattandosi di CSS esterni uso la classica stringa di codice all'interno della sezione head:

<link rel="stylesheet" href="schermo.css" type="text/css">

E il foglio di stile "stampa.css"? Anche quello va collegato:

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

È evidente che rispetto al primo CSS ho aggiunto una nuova proprietà: media="print". Chiariamo subito tutto.

In un documento html si possono dichiarare più stili a seconda del mezzo di visualizzazione, grazie all'uso della proprietà media. I valori possibili per questa proprietà sono:

• all: valore di default, si riferisce a tutti i supporti
• screen: schermo di computer
• print: stampa e anteprima di stampa
• projection: slide shows e presentazioni
• braille: dispositivi tattili per non vedenti
• aural: per browser vocali
• tv: WebTv
• tty: dispositivi a carattere fisso
• handheld: palmari e simili

Quando, come per il primo CSS non dichiariamo nessuna proprietà, assumiamo come valore all: quel CSS sarà applicato a tutti i media.

Nel secondo caso, invece, avendo usato media="print", ho creato un CSS specifico per la stampa.

Riassumiamo

Ora abbiamo tutti gli elementi per capire il funzionamento di questa "magia":

1. Nella pagina html assegno id agli elementi portanti del layout (tabelle e celle di tabelle).
2. Costruisco due CSS, uno globale, uno per la stampa.
3. In quest'ultimo "faccio scomparire", con la proprietà display:none gli id che non voglio stampare.
4. Nel documento collego i due CSS fissando per il secondo la proprietà media="print".

Se avete compreso il meccanismo potete sbizzarrirvi. Se, ad esempio, volete solo impedire la stampa delle immagini, vi basterà inserire nel CSS per la stampa questa regola:

IMG { display : none; }

Allegato all'articolo trovate un file zip con il documento e i due css.

Compatibilità

Le brutte notizie, come sempre, alla fine. Quando si parla di CSS la questione della compatibilità si impone. Ho personalmente testato con successo questo metodo con Explorer 5, 5.5, 6 con Win 2000 e Win 98, con Netscape 6 e Opera 5.12 sotto gli stessi sistemi operativi. Funziona anche con le rispettive versioni per Mac. Non funziona con Netscape 4. Se fate la prova con altre configurazioni di browser + sistema operativo o se notate bug fatemi sapere.

Che fare per chi ha browser non compatibili? Niente. Il loro sistema non andrà in crash, il browser ignorerà l'istruzione e continueranno a stampare pagine web come hanno sempre fatto. Intanto avrete assicurato un ottimo servizio ai possessori di browser più avanzati.

Approfondimenti

La proprietà media sul sito del W3C - Breve pagina con informazioni sui tipi di media e su come dichiarare le regole all'interno di fogli di stile e documenti html.

RichInStyle - Se siete seriamente interessati ai CSS non potete ignorare questo sito. Nella pagina linkata troverete tutto ciò che c'è da sapere sul collegamento di fogli di stile nelle vostre pagine.

La proprietà media e gli stili alternativi - Sullo stesso sito. Una trattazione esaustiva sulla proprietà media e sui fogli di stile alternativi nelle specifiche CSS2.