CSS per la stampa di documenti

24 giugno 2013

Una delle ultime sezioni della specifica CSS 2.1 è dedicata agli stili destinati alla formattazione di pagine stampate. Con le proprietà comprese in questa sezione è possibile definire nei dettagli le modalità di formattazione della pagina in vista della stampa, a partire dalle dimensioni per finire all’orientamento della stessa, proprio come si fa in un comune word-processor.

Con la direttiva @page, ad esempio, possiamo impostare questa regola:

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

Il layout della pagina in fase di stampa sarà quello di un normale foglio A4 con margini di 3cm su tutti i lati.

La parte preponderante della sezione è dedicata alla gestione delle interruzioni di pagina in fase di stampa. È un fattore di cui tenere conto. Quante volte provando a stampare una pagina web ci ritroviamo una tabella divisa tra due pagine? Bene. Per risolvere il problema sono state implementate proprietà ad hoc. Tutte dovrebbero tendere ad evitare situazioni ritenuti nella specifica non ideali:

  • interrompere una pagina in corrispondenza di blocchi con bordi;
  • interrompere una pagina nel bel mezzo di una tabella;
  • interrompere una pagina in corrispondenza di elementi sottoposti al floating.

Anche per questi aspetti esistono proprietà ad hoc:

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

Grazie ad esse è possibile scegliere con esattezza e per ciascun elemento quando e dove inserire un’interruzione di pagina. Ad esempio, se vogliamo evitare che l’interruzione avvenga nel corpo della tabella scriveremo:

table {page-break-inside: avoid;}

Se invece abbiamo una serie di sezioni di sommario alla fine delle quali vogliamo sempre un’interruzione useremo questa regola:

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

page-break-after e page-break-before sono ben supportate sui principali browser.

Preparare un CSS per la stampa

Una volta introdotte queste proprietà specifiche, vediamo otto consigli pratici per produrre un buon CSS per la stampa.

1. Ridefinire il CSS a schermo

La prima cosa da fare nel preparare un CSS per la stampa è decidere se prepararne uno specifico da zero oppure usare come base il CSS per lo schermo. Tra le due non c’è una scelta migliore in assoluto, e in ogni caso il CSS per la stampa risultante non richiederà molto lavoro.

Se dichiariamo nell’head della pagina un CSS senza specificare con l’attributo media il dispositivo a cui si riferisce, questo avrà effetto su tutti i media, incluso la stampa. Basterà quindi definire un CSS per la stampa così da ridefinire quello usato per lo schermo. Ecco un esempio, in cui il file "main.css" verrà adottato da tutti i media, mentre il file "print.css" è quello specifico per la stampa.

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

È importante con questo approccio l’ordine delle dichiarazioni: dato che il CSS per la stampa andrà a ridefinire quello generico, dovrà essere dichiarato per ultimo.

2. Specificare un font-size in punti

Questo punto non è indispensabile, ma soprattutto se si sono usati i pixel per lo schermo, è bene ridefinire la dimensione dei caratteri in punti, dato che questa misura è nata proprio per la stampa. Se si è utilizzato un approccio proporzionale nel CSS generico, dichiarando una misura di base per il body e percentuali o em per titoli e altri elementi, sarà facile trasformare tutto in punti con una sola dichiarazione:

body {font-size: 12pt;}

3. Ridefinire la larghezza del container principale

Questo punto è senza dubbio il più importante in un CSS per la stampa. Sovente ci si trova infatti a stampare una pagina web e vedersi il contenuto tagliato sul lato destro. Se non si è usato un layout liquido è fondamentale far sì che il layout sia liquido in fase di stampa: basta ridefinire su auto la larghezza del contenitore principale. Nel caso il suo id sia #container, la regola CSS necessaria sarebbe:

div#container {width: auto;}

4. Nascondere navigazione e sezioni non indispensabili

Altro punto importantissimo: nella versione stampata navigazione e altre sezioni non indispensabili andrebbero nascoste. Basterà impostare su none la proprietà display. Generalmente basta usare una sola regola, accorpando tutti gli elementi da nascondere. Per esempio la seguente regola nasconde il menu, la sezione dei link e i banner, ipoteticamente individuati da id #menu, #links e #banner:

div#menu, div#links, div#banner {display:none;}

5. Eliminare float e posizionamenti assoluti

Float e posizionamenti assoluti, soprattuto se usati per il layout, possono dare problemi in fase di stampa: oltre che per questioni di larghezza di area di stampa anche per qestioni di resa. Anche in questo caso basterà usare una regola che mostrerà elementi posizionati assolutamente e float nella posizione naturale del flusso di pagina, annullando le proprietà precedentemente impostate. La regola seguente annulla float e posizionamenti assoluti sul menu e la sezione delle news, che verranno quindi stampati in ordine di codice HTML:

div#menu, div#news {position: static; float: none;}

Eventualmente sarà anche necessario sistemare i margini delle sezioni che sulla versione a schermo sono affiancate da elementi float o posizionati assolutamente, indipendentemente dal fatto che questi ultimi si vogliano stampare o meno.

6. Eliminare gli sfondi

C’è da premettere che gli sfondi delle pagine web non vengono stampati di norma dal browser, a meno che l’utente non decida di volerli stampare attraverso le impostazioni del programma. In ogni caso, è importante eliminarli e rispecificare il colore del testo soprattutto se a schermo è chiaro. La seguente regola specifica testo nero e sfondo bianco per il body, il container principale e l’header:

body, div#container, div#header {background: none #FFF;color: #000}

Si può procedere anche in modo più drastico, usando il selettore universale per rendere tutti gli sfondi trasparenti e applicare il colore nero a tutto il testo:

* {background: transparent !important; color: black !important;}

7. Image replacement

Altro aspetto essenziale è rivedere la tipografia per lo schermo, soprattutto nel caso si siano usate tecniche di image replacement. Tutte le tecniche analizzate nell’articolo non garantiscono la stampa del testo rimpiazzato, dato che le immagini di sfondo non vengono stampate di default.

A seconda della tecnica utilizzata, sarà quindi indispensabile annullare per la stampa tutte le dichiarazioni atte a nascondere il testo per mostrare un’immagine di sfondo. Il rischio è infatti che nè il titolo testuale, nè l’immagine di background usate per il replacement vengano stampate, con conseguente perdita di informazione nella versione su carta.

8. Aggiungere gli url dei link e contenuto aggiuntivo nella versione stampata

Concludiamo con una finezza che può costituire senza dubbio un ausilio non indifferente sulla versione stampata. Grazie allo pseudo-elemento :after e alla proprietà content è possibile infatti stampare dopo i link il loro indirizzo tra parentesi attraverso una sola regola:

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

Tutte le lezioni

1 ... 31 32 33

Se vuoi aggiornamenti su CSS per la stampa di documenti inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su CSS per la stampa di documenti

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy