Questa è la traduzione dell'articolo Back To The Future of Print di Natalie Downe pubblicato originariamente su 24 Ways il 9 dicembre 2007.
Da un pezzo abbiamo superato la vechia fase del web development, quella in cui usavamo tabelle, CSS inline e pagine separate per le versioni printer-friendly di un articolo. Su quelle pratiche possiamo oggi riflettere come su una cosa lontana. Non abbiamo più bisogno di lottare per convincere che i fogli di stile per la stampa sono la via da seguire, sebbene taluni aspetti di questa tecnica non siano del tutto chiari e forse un po' datati.
In questo articolo illustrerò 8 trucchetti e 4 consigli per prevenire problemi da usare quando si crea un CSS per la stampa.
Le basi
Come avviene per i normali fogli di stile, i CSS per la stampa possono essere inclusi in diversi modi. Nel nostro caso useremo l'elemento link:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Si tratta del mio metodo preferito per inserire file CSS in una pagina perché è facile vedere quali file vengono inclusi e a quale tipo di media sono applicati. Se specificate l'attributo media l'elemento link usa di default il media type all: significa che gli stili definiti al suo interno saranno applicati a schermo e in fase di stampa. Il media type screen sarà invece usato nella visualizzazione su schermo e non sarà utilizzato quando si stampa. È questo il miglior metodo per nascondere stili dalla stampa.
Assicuratevi di includere il vostro foglio di stile per la stampa dopo tutti gli altri CSS, perché avrete bisogno di sovrascrivere certe regole.
Un'altra cosa a cui pensare in anticipo è questa: "è necessario stampare questa cosa?". Considerate insomma il contesto, se non è una pagina che potrebbe essere utile stampare, come una landing page o l'indice di una sezione, allora il CSS per la stampa dovrebbe essere molto simile al modo in cui la pgina appare a schermo.
Il contesto è davvero importante nella progettazione di un foglio di stile per la stampa. Tutte le tecniche di cui parleremo dovrebbero essere considerate nel contesto della pagina. Se per esempio state progettando un CSS per la stampa relativo ad un item presente in un carrello sella spesa, è irrilevante per l'utente sapere l'URL esatto del link che porta al processo di checkout.
Trucchetti
Nel corso dell'esposizione andremo a realizzare un foglio di stile per la stampa per questo semplice esempio.
1. Rimuovere ciò che non è necessario
Prima le cose più importanti (passo 1). La navigazione, gli header e tutte le parti accessorie della pagina sono pressoché inutili su un foglio di carta. Saranno così da rimuovere usando la proprietà display:none;.
2. Linearizzare il contenuto
Il contenuto suddiviso su colonne non funziona così bene quando passa sulla carta, specialmente se le colonne che ospitano il contenuto sono lunghe. Dobbiamo così prendere in considerazione l'idea di linearizzare il contenuto (passo 2) perché scorra bene nel contesto della pagina. Se avrete la cura di definire con la giusta priorità l'ordine delle sezioni nel codice sarà molto più facile.
3. Migliorare la tipografia
Una volta che abbiamo rimosso le cose che non servono in fase di stampa, possiamo concentrarci un po' di più sulla tipografia (passo 3).
La tipografia è un argomento complesso, ma per semplificare al massimo possiamo dire che i font serif, tipo il Georgia, funzionano meglio sulla carta, mentre quelli sans-serif, tipo il Verdana, sono più appropriati per l'uso su schermo. Nel preparare il nostro CSS per la stampa si può prevedere di aumentare la dimensione del testo, l'altezza di riga (line-height) e di passare da unità di misura come i pixel (px) ai punti (pt). Quest'ultima è infatti una misura specifica per la stampa.
4. Lavorare sui link
Ci sono cose assolutamente divertenti che che si possono fare con i link quando si crea un CSS per la stampa. Ci sono due scuole di pensiero. La prima considera che sia meglio non replicare l'aspetto dei link dal momento che sulla carta non sono cliccabili. La seconda, e io sono d'accordo con questa posizione, ritiene più opportuno far comunque ricordare in qualche modo che una certa porzione di testo puntava ad un altro sito (o ad un'altra pagina) nel contesto del documento originale.
Quando si tratta di decidere quale approccio adottare, considerate il contesto del documento: la gente ha bisogno di sapere dove rimandano i link presenti nella pagina? Li aiuterà o li confonderà avere a disposizione questa informazione? Per un'alternativa alla tecnica che vedremo tra poco potete fare riferimento ad un articolo in cui Aaron Gustafson spiega come generare note a pie' di pagina per la stampa.
Usando qualche buon trucco sui selettori e il contenuto generato con i CSS potete avere l'indirizzo dell'URL contenuto nel link a fianco del link stesso:
HTML
<p>I wish <a href="http://www.google.com/">Google</a> could find <a href="/photoOfMyKeys.jpg">my keys</a></p>
CSS
a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
content: " <" attr(href) "> ";
}
Ma non è qualcosa di perfetto. Nell'esempio visto qui sopra il contenuto dell'attributo href viene piazzato dopo il link in un modo piuttosto approssimativo. Il risultato sarebbe infatti questo:
I wish Google <http://www.google.com/> would find my keys </photoOfMyKeys.jpg>
L'utente non sarebbe pienamente consapevole dell'URL di destinazione. Una soluzione migliore consiste nell'adottare tecniche più avanzate nella definizione dell'URL quando si lavora su URL relativi. Possiamo anche aggiungere uno stile al contenuto generato in modo che sia indistinguibile dallo stesso testo del link:
CSS
a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
content: " <" attr(href) "> ";
color: grey;
font-style: italic;
font-weight: normal;
}
a[href^="/"]:after {
content: " <http://www.example.com"attr(href)"> ";
}
Ora il risultato è quello che cercavamo (nel vostro lavoro potrete ovviamente cambiare example.com con l'indirizzo del vostro sito):
I wish Google <http://www.google.com/> would find my keys <http://www.example.com/photoOfMyKeys.jpg>
Usando le espressioni regolari sul selettore di attributo, possiamo anche eliminare il contenuto generato per i link di tipo mailto:, dal momento che spesso il testo del link, in questi casi, è rappresentato proprio dall'indirizzo e-mail:
HTML
<a href="mailto:me@example.com">me@example.com</a>
CSS
a[href^="mailto"]:after {
content: "";
}
Questo esempio mostra in azione tutto quanto abbiamo spiegato.
Ovviamente con questa tecnica non mancano problemi di supporto cross-browser. Mentre il tutto non apparirà come desideriamo su Internet Explorer 6 e 7, non risulterà comunque completamente alterato su questi browser, che infatti non supportano il contenuto generato. Safari 2+ e Opera 9.X supportano anche il colore sul contenuto generato, mentre Firefox 2 e Camino mostrano tutto in nero a prescindere dal colore del link.
5. Preparare i titoli per la stampa
Questa è più di una considerazione di design. Ci sono molte più limitazioni sulla carta stampata che sullo schermo. Per questo esempio quello che cercheremo di ottenere è avere dei titoli h2 con un bordo e applicare dei colori e dimensioni diversi agli altri titoli.
Ecco l'esempio.
6. Inserire agganci generali
Se state realizzando un sito di grandi dimensioni con diversi tipi di pagine, potrebbe essere utile inserire nella struttura dei vostri CSS (passo 6) delle classi per controllare ciò che deve essere stampato o non stampato (per esempio class="noprint" oppure class="printonly"). Forse non è la cosa ideale dal punto di vista semantico, ma in passato l'ho trovato un metodo molto efficace nella manutenzione del codice su siti piuttosto complessi.
7. Qualche tocco di classe
Quando si stampano pagine che hanno URL molto lunghi, anche se è impostata nelle opzioni del browser la stampa dell'URL nell'header della pagina, c'è la possibilità che l'URL venga troncato.
Usando il trucchetto visto qui sopra (o semplicemente impostando display:none per lo schermo e display:block per la stampa) potete inserire l'URL della pagina che state visualizzando solo per la stampa, usando la variabile Javascript window.location.href:
function addPrintFooter() {
var p = document.createElement('p');
p.className = 'print-footer';
p.innerHTML = window.location.href;
document.body.appendChild(p);
}
Potete richiamare questa funzione con gli eventi onload o ondomready. Ecco ancora una volta la demo in azione.
8. Dati tabellari
Se usate dati inseriti in tabelle nelle vostre pagine ci sono parecchie cose che potete fare per migliorare l'usabilità di queste lunghe tabelle che si espandono su diverse pagine. Se usate l'elemento <thead>, esso dovrebbe ripetere le intestazioni della tabella sulla pagina successiva se la tabella viene spezzata. Si dovrà impostare thead {display: table-header-group;} esplicitamente per IE, anche se questo dovrebbe essere il valore di default.
Se poi usate tr {page-break-inside: avoid;}, ciò dovrebbe impedire (a seconda del supporto nel browser) che le righe della tabella vengano spezzate tra due pagine. Per ulteriori informazioni sulla formattazione di tabelle per la stampa potete leggere questa pagina del wiki di CSS Discuss.
Consigli
1. Dove è finito il mio contenuto?
In assoluto, l'errore più comune che vedo con i fogli di stile per la stampa è il bug del contenuto troncato. Il sintomo è che solo la prima pagina di un div destinato ai contenuti sarà stampata, il resto sembrerà troncato.
Come ha detto Eric Meyer in un suo articolo del 2002 uscito su A List Apart, lunghe colonne definite con il float possono causare il problema, sebbene facendo dei test io non sia in grado di replicarlo. Usare overflow:hidden su lunghe porzioni di contenuto causa problemi di troncamento in Firefox. Overflow:hidden è usato spesso per dare il clear sui float.
Una semplice correzione può essere messa in atto. Se la colonna è floattata potete sovrascrivere la regola con un float:none. Inoltre, overflow:hidden può essere superato da overflow:visible. Oppure le regole che danno problemi possono essere definite solo nel CSS per lo schermo.
Usare position:absolute su lunghe colonne produce un effetto simile, quello cioè di troncare il contenuto, ma in fase di stampa può essere risolto usando position:static.
Insomma, io raccomando di usare i CSS per la stampa solo per le pagine ricche di contenuto. Controllate comunque sempre come rendono in fase di stampa le landing page, le pagine indice o la home. Se diventano inusabili e illeggibili su carta per qualcuno dei problemi visti sopra, potrebbe essere utile applicare pure a quelle un piccolo CSS per la stampa oppure definire le regole su overflow o float solo per lo schermo.
2. Maledette impostazioni per lo sfondo dei browser
Uno dei fattori da tenere sempre presenti è che in nessun modo potete controllare le impostazioni del browser dell'utente, così come il fatto che usi o non usi IE6. Di default, la maggior parte dei browser non stampa i colori e le immagini di sfondo, a meno che l'utente non decida di fare diversamente.
Naturalmente ciò può essere fonte di problemi. Per prima cosa bisogna iniziare a ripensare a cose come il branding. Per esempio, quando si crea il CSS per la stampa, se vogliamo che appaia il logo, dovremmo far sì che esso non sia impostato come un'immagine di sfondo.
Nei casi in cui il colore sia importante per veicolare il senso del documento o qualche importante informazione, tenete presente che in fase di stampa si dovrà fornire all'utente la possibilità di mantenere quell'informazione in toni di grigio anche se decide di stampare in bianco e nero.
Controllate il contrasto dei colori del testo rispetto al bianco. E controllate anche come risulta la pagina stampata con gli sfondi attivati nel browser.
Un'ultima questione con gli sfondi riguarda i list-item. È una pratica piuttosto comune eliminare i bullet delle liste con list-style-type per sostituirli con qualche immagine di sfondo. Questa tecnica non viene tradotta automaticamente su carta: dovrete, nel CSS per la stampa, reintrodurre il bullet normale invece dell'immagine di sfondo.
3. Usare Javascript nel CSS? Attenti a IE6
Internet Explorer ha un problema: quando si usa Javascript in un CSS esso viene applicato a tutti i tipi di media, anche se si vuole applicarlo solo su schermo. Per esempio, se usate qualche tipo di espressione per impostare la larghezza su IE, magari per emulare min-width, un semplice width:100% !important può impedire che l'espressione abbia effetti negativi in fase di stampa.
4. Considerazioni sul progressive enhancement
Un classico momento in cui si esclama "Ohhh!" è quello in cui si realizza che la carta... non supporta Javascript :). Se avete elementi dinamici sulla pagina, per esempio una sezione del documento nascosta, allora dovreste davvero usare qualche tecnica di progressive enhancement e progettare tutto prima per i browser senza Javascript per poi aggiungere le interazioni Javascript.
Se agirete così sarà semplice sovrascrivere le interazioni Javascript nel CSS per la stampa e mostrare tutto il contenuto in stampa.
Conclusioni
Riassumendo: considerate con attenzione la natura del documento e il contesto del sito e della pagina. Usate i trucchetti visti in questo articolo per migliorare la resa su carta. Ricordatevi dei possibili problemi elencati, mantenete il design semplice, testate su tanti browser.
Natalie Downe è una sviluppatrice client-side a cui piace fare le cose nel modo giusto e talvolta diventare ossessiva su alcune di esse. Sebbene lo sviluppo di interfacce front-end e l'usabilità siano stati la sua prima passione, Natalie si diverte anche con Python e qualche API. È anche una consulente di usabilità e project manager. Oggi vive a Brighton. Da gennaio lavora come Senior Client-side Engineer presso Clearleft.
