CSS per la stampa: consigli per l’uso
Venerdì 22 Gennaio 2010 - 08:14
di Gabriele Romanato
Ecco alcuni consigli pratici per creare fogli di stile per la stampa evitando alcuni errori comuni.
Elementi inutili
Elementi inutili quali la navigazione, i form e la pubblicità vanno eliminati con display: none. Valutate comunque se l’informazione è rilevante ai fini della fruizione della pagina.
Colori e sfondi
La regola d’oro è: far risparmiare inchiostro. Normalizzate quindi colori e sfondi sulla classica combinazione nero su bianco. Evitate le immagini di sfondo perché non sono supportate da tutti i browser.
Font
Usate font serif per facilitare la lettura e specificate come unità di misura i punti (pt).
Floating e posizionamento
Sebbene il posizionamento non sia supportato, alcuni browser supportano il floating. Tuttavia, i risultati sono così difformi che ne sconsiglio l’uso.
Interruzioni di pagina
Le interruzioni di pagina (che i CSS controllano tramite le proprietà page-break-before e page-break-after) non ottengono i risultati sperati nella quasi totalità dei casi. I browser infatti seguono quanto detto dalle specifiche, che nel definire le “migliori interruzioni di pagina possibili” lasciano ampia libertà di interpretazione.
Spaziatura e dimensionamento
La spaziatura orizzontale tramite margini e padding viene rispettata, tranne quando si tratta di stili che influenzano il box di pagina. Anche in questo caso, e a maggior ragione con le dimensioni, a prevalere sono gli algoritmi interni dei browser.
Link
I links andrebbero normalizzati, eliminando se possibile la sottolineatura. Nei browser che lo supportano, è possibile usare il contenuto generato per stampare l’URL dei link:
a[href]:after {
content: " (" attr(href) ") ";
}
Ho tuttavia verificato che, a parte non essere supportata da IE 7 e inferiori, questa tecnica presenta dei notevoli problemi quando gli URL sono piuttosto lunghi. In questo caso si possono verificare delle sovrapposizioni tra righe.
Bordi
In genere i bordi andrebbero usati il meno possibile, sempre in vista dell’ottimizzazione dell’inchiostro. C’è poi il caso di quello che succede quando una tabella non rientra nel box di pagina e continua sulla pagina successiva. Il bordo viene ovviamente spezzato, ed è per questo che consiglio di eliminare i bordi dalle tabelle per minimizzare l’impatto delle interruzioni di pagina.
Immagini
I browser adattano automaticamente le dimensioni delle immagini al box di pagina per far si che immagini molto grandi siano comunque visibili. Se si vuole avere un controllo più preciso per le immagini e le interruzioni di riga, si può usare la dichiarazione display: block sulle immagini.
Commenti
1
l’ideale sarebbe fare in modo che nessun elemento fosse mai posizionato né float-tato da regole precedenti (per evitare problemi di specificità delle regole). Il reset per la stampa potrebbe iniziare con
* {
float: none;
position : static;
background : none;
}body {
font : 12pt Georgia, 'Times new Roman';
width : 165mm;
color : #3c3c3c;
}
Suggerisco inoltre di impostare height: auto; alle tabelle (per forzarne la stampa su più pagine quando sono molto lunghe)# - postato da Fabrizio Calderan - 22 Gennaio 2010 - 12:18
2
Grandissimo articolo, grazie!
Al momento sto pensando a come generare in automatico le case-histories dei prodotti a partire dalle pagine web sia per la stampa diretta da casa, sia tramite “stampa” su PDF usando uno dei tanti servizi online.
3
Grazie Fabrizio, ottima aggiunta! ;-)
Gio, fammi sapere come procedi: è una cosa che sta a cuore anche ad un mio cliente. ciao!# - postato da Gabriele Romanato - 22 Gennaio 2010 - 20:37
4
Ciao Gabriele, articolo interessante ma mi chiedo una cosa, perché nel testo dell’articolo ti riferisci ai browser quando l’output dovrebbe andare in una stampante?
Mi riferisco per esempio al caso del Float o della questione sui link.
Altra cosa, che non c’entra forse ma mi richiamo alla risposta di Fabrizio, e dare anche un line-height per la stampa così da evitare problemi con i link come diceva Gabriele nell’aultima parte del suo articolo?M.
# - postato da Grazia Marco - 25 Gennaio 2010 - 09:52
5
@Marco, non l’ho inserito volutamente, volendo solo evidenziare una base minima di regole per la stampa, ma è sicuramente qualcosa da definire per migliorare la leggibilità del testo.
Nei miei css ad esempio ho settato il line-height a 1.618 :)
# - postato da Fabrizio Calderan - 25 Gennaio 2010 - 10:10
6
@Fabrizio d’accordo, ma dato che si parlava di link che si accavallano un line-height di partenza poteva essere un’idea :-)
A proposito, come si modifica la formula per il calcolo della giusta spaziatura per una misura di font data in punti, cioè in 72/inch?M.
# - postato da Marco Grazia - 25 Gennaio 2010 - 11:09
7
Sarebbe un argomento da sviluppare di piu’ in una delle Guide HTML.
Ad esempio, due/tre cose che ho scoperto col tempo:- per stampare immagini a piu’ alta risoluzione, adatte alla stampa e non solo allo schermo, faccio file di dimensioni maggiori e poi li rimpicciolisco tramite CSS. Quando il browser manda l’immagine in stampa, l’effetto finale e’ di avere un valore DPI piu’ alto. (ovviamente la semplice visualizzazione a video e’ penalizzata da un file eccessivamente pesante: va bene se la priorita’ e’ la stampa). Sono riuscito a stampare mappe e foto con un impressionante livello di qualita’ senza dover usare PDF.
- data l’impossibilita’ di usare page-break-inside: avoid, mi toccava forzare dei page break prima di elementi grossi tipo tabelle, per evitare di spezzarli in due pagine. Spreco di carta….
- per avere un’intestazione/pie’ di pagina in ogni pagina, ho scoperto per caso che usando un posizionamento assoluto, l’elemento veniva ripetuto automaticamente in tutte le pagine… si trattava a quel punto solo di assicurarsi che gli altri elementi non gli andassero addosso, impostando margini a sufficienza.# - postato da pbattino - 25 Gennaio 2010 - 12:47
8
@pbattino Raccolgo il tuo invito. Stai sintonizzato sulla sezione CSS. a presto! ;-)
# - postato da Gabriele Romanato - 25 Gennaio 2010 - 18:30