CSS per la stampa: consigli per l'uso

Ecco alcuni consigli pratici per creare fogli di stile per la stampa evitando alcuni errori comuni.

Elementi inutili

Elementi inutili quali la navigazione, i form e la pubblicità  vanno eliminati con display: none. Valutate comunque se l'informazione è rilevante ai fini della fruizione della pagina.

Colori e sfondi

La regola d'oro è: far risparmiare inchiostro. Normalizzate quindi colori e sfondi sulla classica combinazione nero su bianco. Evitate le immagini di sfondo perché non sono supportate da tutti i browser.

Font

Usate font serif per facilitare la lettura e specificate come unità  di misura i punti (pt).

Floating e posizionamento

Sebbene il posizionamento non sia supportato, alcuni browser supportano il floating. Tuttavia, i risultati sono così difformi che ne sconsiglio l'uso.

Interruzioni di pagina

Le interruzioni di pagina (che i CSS controllano tramite le proprietà  page-break-before e page-break-after) non ottengono i risultati sperati nella quasi totalità  dei casi. I browser infatti seguono quanto detto dalle specifiche, che nel definire le "migliori interruzioni di pagina possibili" lasciano ampia libertà  di interpretazione.

Spaziatura e dimensionamento

La spaziatura orizzontale tramite margini e padding viene rispettata, tranne quando si tratta di stili che influenzano il box di pagina. Anche in questo caso, e a maggior ragione con le dimensioni, a prevalere sono gli algoritmi interni dei browser.

Link

I links andrebbero normalizzati, eliminando se possibile la sottolineatura. Nei browser che lo supportano, è possibile usare il contenuto generato per stampare l'URL dei link:

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

Ho tuttavia verificato che, a parte non essere supportata da IE 7 e inferiori, questa tecnica presenta dei notevoli problemi quando gli URL sono piuttosto lunghi. In questo caso si possono verificare delle sovrapposizioni tra righe.

Bordi

In genere i bordi andrebbero usati il meno possibile, sempre in vista dell'ottimizzazione dell'inchiostro. C'è poi il caso di quello che succede quando una tabella non rientra nel box di pagina e continua sulla pagina successiva. Il bordo viene ovviamente spezzato, ed è per questo che consiglio di eliminare i bordi dalle tabelle per minimizzare l'impatto delle interruzioni di pagina.

Immagini

I browser adattano automaticamente le dimensioni delle immagini al box di pagina per far si che immagini molto grandi siano comunque visibili. Se si vuole avere un controllo più preciso per le immagini e le interruzioni di riga, si può usare la dichiarazione display: block sulle immagini.