Preparare un CSS per la stampa

Sono davvero molti i siti che non hanno un CSS per la stampa, con il risultato
che i visitatori si trovano a volte delle pagine stampate che decisamente non rendono
giustizia alla versione su schermo. Preparare un CSS per la stampa è un operazione
piuttosto semplice: in questo articolo vedremo otto consigli pratici per produrne
facilmente uno. Cominciamo subito.

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. Personalmente preferisco usare come base
di partenza il CSS per lo schermo così da avvvantaggiarmi un po' e avere una versione stampata che mantiene
una maggiore somiglianza con la versione a schermo. Se dichiariamo nell'head della pagina un CSS senza
specificare il media 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.

È 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:

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:

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":

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:

Eventualmente sarà 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 browser. In ogni caso è importante quindi 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:

7. Image replacement

Altro aspetto essenziale è rivedere la tipografia per lo schermo, soprattutto
nel caso si siano usate tecniche di image replacement.
Fatta eccezione della List-Item Image Replacement,
tutte le altre tecniche 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
in 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 non ha, purtroppo, compatibilit‡ con Internet Explorer,
ma sugli alti browser quali Opera, Safari e Firefox può costituire senza dubbio un
ausilio non indifferente sulla versione stampata. Grazie allo pseudo-elemento :after
e la proprietà content in questi browser è possibile infatti stampare
dopo i link il loro indirizzo tra parentesi attraverso una sola regola:

Conclusioni

In questo articolo abbiamo visto brevemente otto consigli pratici per preparare facilmente
una versione di stampa, spesso trascurata e che in realtà non richiede molto lavoro, dato che
si tratta solo di riprendere il CSS per lo schermo e semplificarlo per la versione su carta.
Anche in questo caso è importante una buona fase di test, anche solo attraverso l'anteprima
di stampa con i diversi browser. Alla prossima.