Extrowebsite

Quando si parla di stampare pagine web con i CSS, la prima cosa che viene in mente è l'utilizzo dei fogli di stile. I CSS per la stampa stilizzano un documento web quando è da leggere su carta. Nonostante se ne è parlato tanto ed è stato scritto abbastanza, molti siti non implementano fogli di stile adatti per la stampa.

In un articolo trovato in rete, si parlava di quanti pochi siti utilizzano i fogli di stile per la stampa. Essi migliorano di gran lunga l'usabilità del sito in presenza di pagine con molti contenuti, oltre al fatto che necessitano di poco codice scritto.

Una sezione dei CSS 2.1 è dedicata ai fogli di stile per la stampa. Essi mettono a disposizione proprietà attraverso le quali vengono definite le dimensioni dell'area utile, orientamento pagina (orizzontale o verticale), margini ecc...

Dichiare il CSS per la stampa

Nella head della pagina html, come avviene per tutti gli altri fogli di stile, i CSS per la stampa vengono dichiarati nel seguente modo:

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

Se nel documento web dichiariamo nella head un file CSS senza specificare il dispotivo al quale è destinato, il codice avrà effetto su tutti i tipi di media, stampa compresa. E' sufficiente definire un file CSS per tutti i tipi di monitor ed uno specifico per la stampa. Da notare che il fogli di stile per la stampa va dichiarat sempre per ultimo, in maniera tale che vada a sovrascrivere quello/i precedente/i. Esempio:

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

Impostare dimensioni del foglio e margini

Con la direttiva @page, possiamo impostare questa regola:

@page {size: 210mm 297mm; margin: 25mm;}

In questo modo abbiamo comunicato la stessa cosa che facciamo attraverso le impostazioni pagina di un normale programma per scrittura testi. Il layout della pagina stampata sarà quello di un normale foglio A4 con margini di 2,5cm su tutti i lati.

La parte più corposa della sezione dedicata ai CSS per la stampa, riguarda le interruzioni di pagina. E' capitato spesso che, quando abbiamo stampato un articolo da web, ci siamo ritrovati con un titolo in una pagina e tutto il testo nella successiva. Oppure con una tabella "tagliata" in due. Per ovviare a questo inconveniente sono state introdotte delle proprietà apposite. Esse devo principalmente eliminare:

  • interruzione di pagina in corrispondenza di blocchi con bordi
  • dividere una tabella in due parti
  • interrompere una pagina in corrispondenza di elementi dichiarati float: left/right

Per evitare ciò, abbiamo:

  • page-break-after;
  • page-break-before;
  • page-break-inside.

E' grazie a queste dichiarazioni che possiamo scegliere esattamente, per ciascun elemento, quando e dove inserire un’interruzione di pagina. Per esempio, se vogliamo evitare che una tabella venga divisa in due, dovremo scrivere:

table {page-break-inside: avoid;}

Se abbiamo un sommario, al termine del quale desideriamo una interruzione, dovremo scrivere:

section.sommario {page-break-after: always;}

La proprietà page-break-before stabilisce se una interruzione di pagina deve avvenire prima di un elemento specificato.

page-break-before: auto;

Valore iniziale auto: interruzioni di pagina automatiche.

Impostare il font-size in punti

Se per i tipi di media diversi dalla stampa sono state usate misure relative, è bene impostare i punti per le pagine stampate, dato che essi sono proprio specifici per questo scopo. Con una semplice dichiarazione CSS, possiamo avere:

body {
font-size: 13pt;
}

Reimpostare la dimensione del contenitore principale

Questa è una cosa di assoluta importanza. Spesso abbiamo stampato una pagina web e vedere il testo tagliato su uno dei lati. Se nel CSS per il web è stato usato un layout con dimensioni in pixel, è fondamentale che il layout "diventi" liquido in fase di stampa. E' sufficiente definire su auto la larghezza del contenitore principale. Nel CSS avremo:

.wrapper{width: auto;}

Nascondere navigazione e parti non importanti

Quando si stampa una pagina web, menu di navigazione e sezioni non indispensabili (solitamente colonne a sinistra e destra) dovrebbero essere nascoste. Basta impostare su none la proprietà display. Si possono accorpare tutti gli elementi. Il seguente codice di esempio mostra quanto appena descritto.

div#navigation, div#aside-sx, div#aside-dx, div#banner {display:none;}

Evitare float e posizionamenti assoluti

Float e posizionamenti assoluti, quando usati per il layout, possono creare problemi in fase di stampa. Oltre che per motivi di larghezza di area utile, anche per motivi di qualittà di resa della stampa stessa. Come per la sezione appena vista più su, basta usare una regola che mostra elementi posizionati con position: absolute e float, nella loro posizione di default nel flusso della pagina. Il codice di esempio seguente annulla il float al corpo centrale dei contenuti in quanto, alla sua destra ha la colonna denominata "aside".

#content {position: static; float: none;}

Eliminare gli sfondi

Solitamente le immagini o i colori di background non vengono stampati. Potrebbe esserci la remota possibilità che l'utente abbia deciso il contrario. In quel caso, verrebbe tutto su carta. Nel caso in cui, ed è consigliato, volessimo lo sfondo tutto bianco, è importante eliminarli e riscrivere la regola che annulla il colore di sfondo. Il codice di esempio assegna colore di sfondo bianco, per tutto e colore del testo nero.

body, #content, #header {background: none #fff;color: #000}

Stampare i link e contenuto aggiuntivo

Se nel testo della pagina web abbiamo qualche link, sarebbe bene che l'utente non debba "intuirlo" quando leggerà la stampa. Possiamo inserire un ausilio e far leggere dove quel link condurrà, in maniera molto semplice e con pochissimo codice nel foglio di stile. Poniamo il caso che un link "punti" al sito http://NomeSito.it. Nel codice CSS avremo:

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

Questa istruzione indica: stampa dopo (after) la parola linkata, il contenuto dell' attributo href. Vale a dire che su carta avremo: link [http://NomeSito.it].