La maggior parte dei siti e delle applicazioni web sono pensati quasi esclusivamente per la visione su schermo e risultano spesso inadatti ad essere stampati. Spesso basta visualizzare dal proprio browser l'anteprima di stampa di un sito web per rendersi conto di una serie di elementi ridondanti e superflui che portano ad uno spreco di carta ed inchiostro: ciò che interessa sono i contenuti, le informazioni e quindi colori, immagini e sfondi così come i menu di navigazione, form di contatto e ricerca, pubblicità di vario genere sono praticamente inutili per chi stampa. Schermo e stampa sono media diversi che richiedono scelte diverse, perché ciò che è importante rappresentare su schermo può non essere altrettanto rilevante dal punto di vista della stampa, la cui funzione è semplicemente quella di stampare le informazioni significative contenute sul sito. Questi ostacoli si superano facilmente costruendo uno specifico foglio di stile (CSS) per la stampa. Ecco alcuni consigli pratici per creare fogli di stile per la stampa evitando alcuni errori comuni.

Elementi inutili

Navigazione, moduli (form) e pubblicità vanno eliminati con la dichiarazione display: none. Occorre comunque valutare se l'informazione contenuta in questi elementi è rilevante ai fini della fruizione della pagina.

Colori e sfondi

La regola è risparmiare inchiostro. Occorre normalizzare colori e sfondi sulla classica combinazione nero su bianco e vanno evitate le immagini di sfondo (che verranno nascoste con la dichiarazione display: none) perché non sono supportate pienamente da tutti i browser.

Attributi tipografici

E' meglio usare font serif - con grazie - aumentando la dimensione del carattere per facilitare la lettura. Inoltre, per migliorare la leggibilità si può usare anche la spaziatura del testo:

body {
font: 14px/18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
}

Attributi di posizionamento

Anche se il posizionamento non è supportato, alcuni browser supportano la dichiarazione float. Tuttavia i risultati sono così difformi da sconsigliare il suo utilizzo.

Interruzioni di pagina

Le interruzioni di pagina (che in CSS si controllano con le dichiarazioni page-break-before e page-break-after) non ottengono risultati soddisfacenti nella maggior parte dei casi. I browser seguono le specifiche, che nel definire le interruzioni di pagina, lasciano ampia libertà di interpretazione.

Spaziatura e dimensionamento

La spaziatura orizzontale definita dalle dichiarazioni margin e padding viene rispettata, tranne quando si tratta di stili che influenzano il box contenitore di pagina. Anche in questo caso prevalgono gli algoritmi interni dei browser.

Links

I links vanno normalizzati, eliminando la sottolineatura, inutile dal punto di vista della stampa. Nei browser che lo supportano, è possibile usare il contenuto generato per stampare l'URL dei link. Tuttavia, questa tecnica non è supportata da Internet Explorer 7 e inferiori e presenta dei notevoli problemi quando gli URL sono piuttosto lunghi (si possono verificare sovrapposizioni di riga):

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

Bordi

I bordi vengono usati il meno possibile, sempre per risparmiare inchiostro. Inoltre, succede anche che quando la tabella è molto grande, continua sulla pagina successiva. Il bordo viene ovviamente spezzato, perciò è meglio 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, così anche le immagini molto grandi possono essere comunque visibili. Se si vuole avere un controllo più preciso per le immagini e le interruzioni di riga, basta usare la dichiarazione display: block sulle immagini.

• Follow @smartpixel_it