CSS per la stampa corretta

Molto spesso capita di voler stampare una pagina web, a video sembra normale, però con grande delusione scopriamo che sulla carta è un vero disastro: una parte sborda è viene tagliata, troviamo menu, banner e immagini inutili che non volevamo, e in caso di tabelle le troviamo senza celle colorate ne’ bordi.
Per risolvere questi problemi molti siti web mettono un’icona “versione per la stampa“. Di fatto si apre una nuova pagina, rielaborata dal server, che contine solo i contenuti da stampare. In realtà possiamo fare a meno di questo trucco, perché basterebbe utilizzare bene le proprietà dei CSS, il media print esiste apposta per istruire il browser su come vogliamo la stampa. Ma che regole css dobbiamo usare nel print? In realtà ne bastano pochissime per fare una stampa decente.

Prima di tutto bisogna inserire in head della pagina il CSS di tipo print subito dopo gli altri stili CSS usati per lo screen.
Come in questo esempio:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
... eventuali altri...
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Nel file print.css scriviamo tutte le regole che vogliamo cambiare in caso di stampa, quindi prima di tutto possiamo rendere invisibili gli elementi in eccesso, ad esempio: il menu, il footer, lo spazio dei banner… eccetera.

#menu, #footer, .advertising {
    display: none;
}

Successivamente dobbiamo “liberare” i contenuti lasciati visibili da eventuali float e dimensioni fisse. Questo perché le colonne dei testi a volte sono troppo strette o troppo larghe, ed è meglio che il contenuto sfrutti tutta la larghezza del foglio A4 nel modo naturale, con i margini impostati nell’anteprima di stampa.
Inoltre abbiamo anche un noto bug che riguarda gli elementi float molto lunghi nei browser Mozilla. Se l’elemento supera la lunghezza della pagina, il resto dell’elemento sparisce e non viene stampato.

Per risolvere questo problema inseriamo stili che tolgano il float e che adattino la larghezza al 100%.

#wrapper, #content {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    float: none;
}

Fatto questo siamo già a buon punto, adesso possiamo settare il background bianco agli elementi che hanno colori o immagini di sfondo, le stampanti di solito li rimuovono già di default ma non è una cattiva idea prevederlo noi. Inoltre per una buona lettura bisogna mettere il font nero o di tono scuro, nel mio esempio ho dato a tutti gli elementi l’impostazione tramite il selettore jolly (*).
Altra cosa che potremmo volere è un bordo su alcuni elementi che non ce l’hanno, ad esempio delle tabelle che a video hanno le celle colorate ed il bordo a 0, ma che in stampa restano con le celle vuote e indistinguibili.

* {
    background: white;
    color:#000000;
}
 
table {
    margin-top:10pt;
    margin-bottom:10pt;
    border-collapse:collapse;
}
 
table td {
    padding:10pt;
    border:1px solid #000;
}

Possiamo a questo punto dedicarci alle finezze, ad esempio il font. Per lo screen abbiamo usato dimensioni in “em” oppure in “px” ma per la stampa potremmo scegliere di usare la dimensione in “pt” e generalmente 12pt è una buona misura.
Non solo, magari il tipo di font non è gradevole per la stampa, quindi potremmo cambiarlo in sans serif, ad esempio Arial.
Poi i titoli (h1, h2, h3), di solito sono preimpostati, potremmo fissare noi come devono essere visualizzati.

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12pt;
}
h1 {
    font-size:20pt;
    font-weight:bold;
}

A questo punto è rimasto poco da sistemare, e sono cose opzionali. Possiamo cambiare il colore dei link per uniformarli tra visitati e non, oppure se non li vogliamo distinguere dal testo possiamo metterli neri e togliere la sottolineatura.
Fate un po’ come volete, i risultati dei cambiamenti possiamo vederli con la anteprima di stampa. Creare il print.css è una soluzione semplice ed elegante. Ecco un esempio di stile per la stampa:

#header,
#footer,
#right,
.back,
.ce_comments,
.pdf_link {
    display:none;
}
 
* {
    background-color:#fff;
    font:12pt Arial,Helvetica,sans-serif;
    color:#000;
}
 
h1 {
    font-size:20pt;
    font-weight:bold;
}
 
h2 {
    font-size:16pt;
    font-weight:bold;
}
 
h3 {
    font-size:14pt;
    font-weight:bold;
}
 
#main {
    width:100%;
    float:none;
}
 
table {
    margin-top:10pt;
    margin-bottom:10pt;
    border-collapse:collapse;
}
 
table td {
    padding:10pt;
    border:1px solid #000;
}