Considerazioni sull'uso dei CSS per la stampa

Ogni tanto capita che le cose ti accadono quotidianamente si incastrino alla perfezione con cià che leggi in rete. Proverà a fare il punto.

Un amico mi manda il figlio sedicenne a cui ha appena comprato un magnifico Mac Book, il primo Mac su cui entrambi mettono mano. Avevo loro parlato di

Parellels, segnalando anche i post pubblicati sul blog e dedicati a questo software di virtualizzazione. Il ragazzo, che sul web ci va da un pezzo e che si muove con una certa dimestichezza tra le opzioni di un browser, decide di stamparli. Mi richiama allarmato: "Guarda, mi sa che questo Safari non stampa bene, taglia le pagine...".

Cos'è accaduto? Stampando non ha ottenuto quello che si aspettava (tutta la pagina). Perché? Perché usiamo su Edit un CSS per la stampa che elimina le parti accessorie lasciando solo il corpo del post.

Gli ho spiegato che Safari funziona, che è meglio così, che tanti altri siti lo fanno. Rimane il fatto delle aspettative non rispettate, della sorpresa, del dubbio che qualcosa non avesse del tutto funzionato. Certo, poteva fare un'anteprima di stampa e capire in anticipo cosa avrebbe ottenuto, ma, francamente, chi è che la fa questa anteprima?

Domanda 1: come si risolve questo problema di usabilità  che è insito nell'uso dei fogli di stile per la stampa?

Domanda 2: come la mettiamo, utilizzandoli questi fogli di stile, con quelli che vorrebbero potersi stampare tutta la pagina, così come la vedono sullo schermo?

Io so come farlo, molti di voi lo sanno. Ma il ragionamento va applicato ai milioni di Marco che non passano il tempo a crogiolarsi tra estensioni per Firefox e simili. Non volevo dirlo, ma per capirci... va applicato all'utente medio.

Rispetto alla questione dell'anteprima e delle aspettative, ho subito collegato quanto accaduto ad un articolo uscito tempo fa su A List Apart: Print to preview (qui la traduzione apparsa su HTML.it).

Spiega una semplice tecnica Javascript per proporre all'utente un'anteprima dell'aspetto della pagina stampata da coniugare all'uso di CSS per la stampa. Ecco l'esempio.

Un'implementazione diversa in termini di interfaccia ma basata sullo stesso script di A List Apart è questa. L'ho trovata tra i commenti a questo post in cui Roger Johansson presenta un piccolo script per implementare in modo non intrusivo la stampa via Javascript con un link presente nella pagina, il classico <a href="javascript:window.print()">Stampa la pagina</a>.

Post interessante soprattutto per i commenti che seguono e per le considerazioni in termini di usabilità .

Rimane la seconda domanda: come conciliare in maniera trasparente ed efficace l'opzione per la stampa dell'intera pagina con quella della versione ottenuta con il CSS per la stampa? Qualcuno ha mai dovuto affrontare una situazione simile?

Sì, lo so che realizzando un sistema con la 'versione per la stampa' si risolve più o meno tutto, ma il ragionamento è per quei casi in cui non è possibile contarci... ;-).