CSS per la stampa, un codice di esempio

In questa quarta ed ultima parte della guida ai fogli di stile per la stampa vedremo come costruire un codice CSS di base che permetta una buona riproduzione di una pagina HTML anche quando se ne decide la stampa su carta.

Le regole base di un CSS per la stampa

In questo esempio prenderemo in considerazione alcune delle esigenze più comuni che devono essere soddisfatte nella stampa di un documento HTML. Anzitutto è generalmente necessario che la stampa avvenga con caratteri neri e senza eventuali elementi di sfondo. Realizzeremo questo risultato definendo per l’elemento Body le proprietà color e background-image. Sempre nell’elemento Body definiremo la proprietà margin per fissare opportuni margini ed evitare che l’area di stampa sia troppo vicina ai margini del foglio. Potremo infine aggiungere una indicazione sul tipo di caratteri da utilizzare preferendo quelli Serif (con grazie). Per l’elemento Body avremo quindi un codice CSS di questo tipo:

body {
  margin: 2cm;
  color: black;
  background-image: none;
  font-family: "Times New Roman",Times,serif;
}

Le altre principali regole CSS che andremo ad utilizzare riguardano da un lato le gestione dei titoli e dall’altro la rappresentazione dei link. Metteremo in risalto i titoli principali (H1, H2 ed H3) con l’uso di una semplice cornice. Considerato che su carta non ha molto senso evidenziare i link, creeremo inoltre delle regole opportune affinché i collegamenti mantengano lo stesso colore del testo e non siano sottolineati. Il codice CSS che introduce queste nuove condizioni è il seguente:

h1, h2, h3 {
  border: 1pt solid black;
}
a:link, a:visited {
  text-decoration: none;
  color: black;
}

Il codice così costruito rappresenta una base generale che può essere poi personalizzata a seconda delle esigenze specifiche. Se ad esempio volessimo evitare di stampare le immagini potremmo aggiungere una ulteriore regola CSS di questo tipo:

img {
  visibility: hidden;
}

Ricapitolando quindi il nostro foglio di stile per la stampa assumerà questa forma base:

body {
  margin: 2cm;
  color: black;
  background-image: none;
  font-family: "Times New Roman",Times,serif;
}
h1, h2, h3 {
  border: 1pt solid black;
}
a:link, a:visited {
  text-decoration: none;
  color: black;
}
img {
  visibility: hidden;
}