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.
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.
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.
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.
In alternativa alla creazione di pagine ottimizzate per la stampa, è possibile, e consigliabile, realizzare un foglio di stile specifico. E' questo il metodo utilizzato da .ConStile. L'unica controindicazione all'adozione di questo metodo, che verrà illustrato nella prossima sezione, è che non funziona sui browser (come NN4) che non sono in grado di leggere fogli di stile per specifici la stampante. Per verificare come il metodo funzioni egregiamente, provate a stampare questo articolo. Noterete che la barra laterale e il menu di navigazione scompaiono. Noterete inoltre l'utilizzo di un diverso font.
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; }
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.
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.
La dimensione dei caratteri stampati su carta può essere impostata attraverso attraverso i punti, l'unità di misura dei caratteri negli elaboratori di testo.
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; }
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;
}
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.
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.
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: