Fogli di stile per la stampa

Tutti gli elementi che compongono una pagina web non sempre assumono lo stesso livello di importanza quando si ha la necessità di stampare la pagina su carta. Molti di essi, essenziali per la navigazione e l’interazione su web, divengono del tutto inutili quando si portano su carta. Anzi, in questo caso provocano confusione e, soprattutto enorme spreco di carta e inchiostro che, con un minimo di attenzione avremmo potuto evitare.

Si ha quindi la necessità di realizzare un foglio di stile apposito per la stampa che consente di disporre nella giusta maniera i contenuti della pagina. Vediamo insieme come realizzare un foglio di stile e le regole a cui bisogna attenersi.

Importare il foglio di stile nella pagina

Ovviamente la prima azione da compiere è quella di inserire nella pagina web il foglio di stile per la stampa. Questa operazione può essere effettuata in tre maniere:

• utilizzando @import;
• utilizzando @media;
• inserimento diretto nella pagina attraverso il tag link.

@import

L’import è una proprietà che consente, appunto, di inserire un foglio di stile all’interno della pagina o di un altro foglio di stile. Per importare quello per la stampa è necessario il seguente codice:

@import url('print.css') print;

In pratica l’attributo print con cui termina la regola è il "media" ovvero la destinazione del foglio CSS.

@media

La proprietà media consente di raggruppare una serie di regole che saranno valide solo per il media type dichiarato. Un esempio di utilizzo è il seguente:

@media print { /* codice */ }

Link

L’ultima tecnica, probabilmente la più popolare, consiste nel richiamare all’interno della pagina il file CSS nella classica maniera, ovvero utilizzando il tag <link> specificando però il media print come nel seguente esempio:

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

Impostare il body

Il primo passo nella realizzazione del foglio di stile per la stampa è quello di dare un’impostazione preliminare al body. Ovvero: impostare un font adatto ed eliminare eventuali background. Per chi non conoscesse le leggi della tipografia, è altamente consigliato utilizzare un font ‘serif’ per testi su carta. Quindi, dobbiamo scegliere un carattere con le grazie come Times, Georgia, etc:

body {
  background: white;
  color: black;
  font-family: “Times New Roman”, Times, serif;
  font-size: 12px;
}

Anche la dimensione è importante. Nel testo stampato una dimensione di 12 pixel è sufficiente per essere letto correttamente, mentre dimensioni come 14 o 16 pixel potrebbero risultare difficili da leggere quando i testi sono lunghi.

Generalmente quando si realizza un layout le dimensioni degli altri elementi “dipendono” dalla dimensione impostata nel body quindi, se espresse in em o in percentuale, non si ha il bisogno di andare nuovamente a modificarne la dimensione. Nel caso in cui, invece, anch’essi siano espressi in pixel si deve andare ad agire manualmente impostandone la nuova dimensione.

Un altro piccolo dettaglio che possiamo aggiungere prima di procedere è giustificare il testo dei paragrafi così da migliorarne la lettura.

Nascondere elementi inutili

Come detto all’inizio dell’articolo, molti elementi della pagina essenziali su schermo, diventano del tutto inutili quando vengono portati su carta. Vediamo insieme una pagina web selezionando quelli che saranno gli elementi inutili da nascondere quando stampata:

La pagina è visualizzabile al seguente link.

Analizzando la pagina notiamo che ci sono molti elementi del tutto inutili per la stampa. Ad esempio il menu, tutta la sidebar, la pubblicità presente tra i vari post, etc. Il prossimo passo, quindi, consiste nel nascondere completamente tutti questi elementi con una semplice riga di codice come la seguente:

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

Un altra cosa a cui bisogna prestare attenzione sono i form. Componenti fondamentali per interagire con il sito web, risulta del tutto inutile stamparli su carta per cui è consigliabile evitare di visualizzarli:

form, input, textarea {
  display: none;
}

Attenzione al float

Soprattutto nei browser più datati, quando gli elementi hanno dei floating particolari, è bene ripristinarne la giusta posizione onde evitare che siano tagliati o peggio ancora posizionati in maniera errata nella pagina. L’unica proprietà da assegnare è float:none a quegli elementi o, se si preferisce, a tutti gli elementi della pagina stando attendi a verificare come viene visualizzata la pagina.

Rendere visualizzabile l’indirizzo dei link nella pagina

Quando bisogna lavorare sui link bisogna innanzitutto eliminare eventuali stili che potrebbero portare in inganno i lettori su carta. Bisogna quindi eliminare grassetti, corsivi o sottolineature e renderli del tutto uguali al normale testo. Un esempio potrebbe essere il seguente:

a {
  color: black;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

Quando portiamo i link su carta, però, non abbiamo più la possibilità di recuperarne gli indirizzi a cui puntano, costringendo l’utente a tornare sulla pagina web per utilizzarli. In questo caso possiamo utilizzare un comodo trucchetto che consente di visualizzare l’indirizzo di fianco al link. Bisogna sfruttare il selettore :after con il seguente codice:

a:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
}

A questo punto abbiamo realizzato un semplicissimo esempio di foglio di stile per la stampa. È ovvio che ogni pagina necessita dei dovuto accorgimento e che quindi non è possibile realizzarne uno valido per tutto però basta seguire i concetti appena visti per realizzare in maniera del tutto semplice il vostro foglio di stile.

Possiamo vederlo all’opera nel precedente esempio visualizzando l’anteprima di stampa oppure visualizzando alla questa pagina che contiene il solo foglio di stile per la stampa.

Page-break

A volte si ha la necessità di decidere in che punto far saltare il contenuto ad un’altra pagina. Ad esempio, se abbiamo una tabella che nella stampa viene “tagliata” separando i dati nelle due pagine, potrebbe risultare utile decidere di inserire un’interruzione di pagina prima che inizi la tabella così da averla completa in una pagina. Allo stesso modo si può decidere di inserire un’interruzione di pagina prima di un determinato elemento oppure impedire che un elemento venga “tagliato” della stampa. Per fare ciò abbiamo bisogno di tre proprietà del CSS chiamate:

• page-break-after
• page-break-before
• page-break-inside

Queste due proprietà accettano come parametri:

• Auto – inserisce un'interruzione di pagina all’occorrezza;
• Always – inserisce sempre un'interruzione di pagina;
• Avoid – inserisce un'interruzione di pagina dopo un elemento;
• Left - inserisce un'interruzione di pagina a sinistra;
• Right - inserisce un'interruzione di pagina a destra.

Vediamo un semplice esempio per chiarire il concetto. Supponendo di voler inserire l’interruzione di pagina prima di una tabella è sufficiente il seguente codice:

table {
   page-break-before: always;
}