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) ")"}