Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Pagine pronte per la stampa con i CSS

Pagine pronte per la stampa con i CSS

di Gianluca Troiani, 09 Aprile 2004

Versione Stampabile

L'articolo proviene da Constile.org ed è stato riprodotto per gentile concessione dell'autore.


Le pagine web, spesso pensate solo per la visione su schermo, possono risultare inadatte alla stampa. In questo articolo vedremo come, attraverso i CSS, sia possibile impostare l'aspetto di una pagina quando viene stampata.

Perché stampare una pagina

Quando una pagina web viene stampata, ciò che interessa il navigatore sono i contenuti. I menu di navigazione, i banner, le gif animate e gli effetti speciali non interessano. La quasi totalità dei webmaster sembra però insensibile al problema. La cosa è sorprendente, soprattutto poiché la quasi totalità delle pagine web, così come appaiono su schermo, sono inadatte alla stampa.

Perché le pagine su schermo non sono adatte alla stampa?

Bisogna avere chiaro un concetto fondamentale: media differenti hanno necessità differenti. Quando stiamo navigando su un sito utilizzando lo schermo del PC, i menu di navigazione sono molto comodi. Quando stampiamo una pagina, i menu di navigazione sono completamente inutili. Su schermo possiamo giocare con i colori, ma le stampanti in bianco e nero possono non essere in grado di riprodurre gli stessi risultati. Lo schermo del PC si basa sui pixel, le stampanti si basano sui punti e sui millimetri. Lo schermo è più largo dei fogli usati dalle stampanti.

Le due possibili soluzioni al problema

Pagina adatta alla stampa

I webmaster, almeno quelli che si sono posti il problema, spesso hanno cercato una soluzione aggirando il problema stesso e realizzando apposite pagine adatte alla stampa. Alle normali pagine se ne afficancano altre con gli stessi "contenuti informativi", realizzate appositamente per essere stampate. La cosa è lodevele, ma presenta due svantaggi: uno per il webmaster, l'altro per l'utente. Il webmaster si vede infatti costretto a realizzare due versioni di una stessa pagina. Questo problema non è poi così importante per i siti dinamici. Lo svantaggio per l'utente è di natura differente. Affinché possa stampare in maniera ottimale i contenuti, l'utente deve selezionare il link che conduce ad una nuova pagina, ma non sempre il navigatore si accorge dell'esistenza dell'apposito link.

Foglio di stile specifico per la stampante

Realizzare un foglio di stile specifico per la stampante

Via il superfluo

Innanzitutto sarà utile eliminare tutte quelle parti che non occorre o non vogliamo che siano stampate. Ciò è facilmente realizzabile con la proprietà 'display:none', i contenuti ci sono ma non verranno stampati. Siano, ad esempio, '#barra-laterale' (un ID) e '.sponsor' (una calsse) i selettori della barra laterale e degli sponsor e si voglia evitare di stamparli. Il codice da utilizzare sarà il seguente:

#barra-laterale, .sponsor { display: none; }

Attenzione ai colori

Successivamente sarà opportuno impostare colori che risultino adatti alla stampa. L'unica scelta possibile per i testo è ovviamente il nero, mentre può risultare utile colorare differentemente i titoli e i link. In ogni caso i colori dovrebbero essere sufficientemente scuri, per evitare che le stampanti in bianco e nero restituiscano del testo troppo chiaro e poco leggibile.

Il carattere è importante

Su schermo vengono spesso preferiti i caratteri sans-serif (come Verdana o Helvetica), ma per la stampa su carta è preferibile usare i caratteri serif (come il Georgia o il Times) anche perché le grazie dei caratteri serif facilitano la lettura e vengono riprodotte su carta meglio che su schermo (grazie alla maggiore risoluzione delle stampanti). Per i titoli è consigliabile utilizzare caratteri differenti, in questo caso i caratteri più adatti sono quelli serif.

Essendo la lettura su carta meno faticosa, è possibile utilizzare caratteri più piccoli di quelli che solitamente si utilizzano su schermo, facendo risparmiare inchiostro e fogli agli utenti. I visitatori del vostro sito ne saranno contenti.

Precisi al millimetro

Lo schermo dei PC è basato sui pixel. Qualsiasi altra unità di misura non ha molto senso. Su carta è diverso. La pagina ha una dimensione standard (210 x 297 millimetri per il formato A4). Su carta è possibile e opportuno specificare dimensioni in millimetri. Potete impostare bordi, margini, larghezze con precisione millimetrica. Provate ad esempio a stampare questo articolo (qualora non lo aveste già fatto). Noterete che le barre sopra e sotto il logo sono spesse esattamente un millimetro e che l'indentazione dei paragrafi è esattamente 10mm. Ciò è stato possibile grazie alle seguenti due istruzioni:

#header { border-bottom:1mm solid #000; border-top:1mm solid #000; }
#corpo p { text-indent: 10mm; }

La dimensione dei caratteri stampati su carta può essere impostata attraverso attraverso i punti, l'unità di misura dei caratteri negli elaboratori di testo.

Come rappresentare i link

Come per la normale rappresentazione su schermo, anche le pagine stampate dovrebbero avere bene in evidenza i link. Caratteri in grassetto e testo sottolineato saranno sufficienti. Volendo è possibile scegliere di utilizzare un diverso colore. In questo caso il colore ideale è il blu scuro. I link visitati dovrebbero avere lo stesso aspetto di quelli non ancora visitati.

a:link, a:visited {
font-weight:bold;
text-decoration: underline;
color:#009;
}

Dove conducono i link?

Abbiamo evidenziato i link. Chi leggerà la pagina stampata saprà che ci sono ulteriori informazioni da leggere, in altre pagine, ma qual'è l'indirizzo. I fogli di stile permettono anche questo. Attraverso il codice di seguito riportato, l'indirizzo puo seguire il link.

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

Questo metodo ha due problemi: il primo è che questo tipo istruzione funziona solo con i browser che interpretano al meglio i fogli di stile, in particolare solo sui browser basati su Gecko™, cioè Netscape Navigator 6 e Mozilla 1.0. Dunque il metodo non funziona con Opera 6 e Internet Explorer 6. Il secondo problema è dovuto alla struttura dei link. L'indirizzo che verrà visualizzato sarà quello riportato nell'attibuto 'href' dei link. Quindi l'indirizzo di pagine interne al vostro sito sarà del tipo '../../sezione/pagina.html' ovvero '/sezione/pagina.html' dipendendo da che tipo di indirizzi si utilizzano: indirizzi relativi o indirizzi assoluti. Per i link esterni non ci sono problemi 'http://www.sitoesterno.xxx/'. La cosa non è grave e in futuro potrà essere sistemata con i CSS di livello 3.

Associare un foglio di stile alla stampante

Per associare un foglio di stile specifico alla stampante basta utilizzare il seguente codice:

[...]
< head>
[...]
< link rel="stylesheet" type="text/css" href="/css/stampante.css" media="print" />
[...]
< /head>
[...]

Bisogna però fare attenzione a come sono richiamati gli altri fogni di stile. Se un foglio di stile viene collegato ad una pagina senza specificare il tipo di media, la stampate, alle regole specificate nel file '/css/stampante.css' aggiungerà anche le regole dell'altro CSS. Per risolvere il problema è sufficiente specificare il media per ogni foglio di stile attraverso il seguente codice:

[...]
< head>
[...]
< link rel="stylesheet" type="text/css" href="/css/schermo.css" media="screen" />
< link rel="stylesheet" type="text/css" href="/css/palmare.css" media="handheld" />
< link rel="stylesheet" type="text/css" href="/css/stampante.css" media="print" />
[...]
< /head>
[...]

oppure:

[...]
< head>
[...]
< style type="text/css" media="screen">@import "/css/screen.css"; /* No NN4 */</style>
< link rel="stylesheet" type="text/css" href="/css/palmare.css" media="handheld" />
< link rel="stylesheet" type="text/css" href="/css/stampante.css" media="print" />
[...]
< /head>
[...]

Purtroppo, se i fogli di stile vengono richiamati attraverso il metodo @import, il che è molto comodo per nascondere i CSS a Netscape Navigator 4, Opera 6 sembra trascurare il media a cui il foglio di stile è associato. In questo caso sarà necessario sovrascrivere le regole contenute nei fogli collegati tramite @import.

Pronti ad andare in stampa

Impostare un foglio di stile per la stampante è, in realtà, molto più facile di quanto non appaia da questo articolo. In ogni caso, i vantaggi offerti ripagano il lavoro svolto.

Per ulteriori dettagli vi consigliamo di leggere i seguenti articoli:

^Top

Dai un voto a questo articolo:   HITS: 1 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1