Questa è la traduzione dell'articolo Print to Preview di Pete McVicar, pubblicato originariamente su A List Apart il 24 ottobre 2006. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.
Ricordate i vecchi tempi in cui bisognava creare una versione parallela del sito o template separati in un CMS per avere pagine adatte alla stampa? Non piaceva a nessuno. Ad un certo punto arrivarono i fogli di stile per la stampa e tutto sembrò essere diventato meraviglioso e semplice. Tranne che per un dettaglio: l'accoglienza da parte di molti utenti. Improvvisamente, si sono sentiti, come dire, un po' confusi, perché su parecchi siti (tranne forse quelli più grandi) era scomparso il link "Stampa questa pagina" e la conseguente anteprima che seguiva quel click.
Cosa succede oggi?
Molti siti hanno praticamente liquidato il link o il pulsante "Stampa questa pagina". La maggior parte dei web designer si aspetta che gli utenti del sito sappiano come stampare una pagina del browser. Se offrono un pulsante, il click avvia semplicemente la stampa, senza un'anteprima. Certo, c'è un pulsante ad hoc per visualizzare l'anteprima nel pannello di dialogo della stampa, ma la maggior parte delle persone non lo usa, lo ha dimenticato o semplicemente non sa che esiste o a che serve.
Come ha fatto notare Cameron Adams nel 2004, i visitatori non hanno molta confidenza con i CSS per la stampa e non usano l'anteprima. Quando stampano una pagina si aspettano che il layout che otterranno sul foglio sia molto simile a quello che vedono sullo schermo, se non uguale. Ma i lettori di A List Apart sanno che i cambiamenti tra il foglio di stile per lo schermo e quello per la stampa possono essere anche enormi. In genere è una cosa voluta, perché magari desideriamo migliorare la resa in stampa eliminando tutti gli elementi non necessari in quel contesto come la navigazione e la pubblicità. Comunque sia, questi cambiamenti possono produrre un certo sconcerto negli utenti riguardo al modo in cui hanno stampato la pagina e al come quest'ultima sia collegata al sito che hanno visitato.
Aspettative
E allora, in che modo possiamo far sì che le aspettative trovino conferma nel risultato finale (la stampa)? Ovviamente ci affidiamo allo switch dei fogli di stile! Potremmo creare un CSS alternativo per mostrare come la pagina apparirà stampata, potremmo anche mostrare un messaggio che spiega bene la natura di quella vista particolare, e quindi, potremmo finalmente stampare la pagina con il CSS per la stampa che conosciamo, amiamo e di cui ci fidiamo.
Come si fa
Prima di tutto, prenderemo un pezzettino di codice da un vecchio articolo di ALA, Alternative Style: Working With Alternate Style Sheets. Ecco il codice (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):
setActiveStyleSheet(title){ // select the stylesheet
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link") [i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
Quindi aggiungiamo un paio di funzioni all'interno del nostro file Javascript (print.js). Queste funzioni, semplicemente, aggiungono un link "Stampa questa pagina" quando la pagina viene caricata, fanno sì che venga mostrata un'anteprima di stampa che fa comparire automaticamente il box di dialogo per la stampa, aggiungono un messaggio nell'anteprima che spiega la funzione e la natura dell'anteprima stessa, e infine, inseriscono un link che consente di tornare alla vista normale della pagina (nota editoriale: le righe di codice spezzate sono indicate con il simbolo »):
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
/* more code to run on page load */
if (document.getElementById){
// add extra functions to page tools list
var print_page = document.getElementById('nav');
// create print link
var print_function = document.createElement('p');
// print_function.setAttribute('class', 'print');
//IE doesn't like this
var print_function_link = document.createElement('a');
print_function_link.onclick = function() { print_preview(); return false; }
print_function_link.setAttribute('href', '#');
var print_function_link_text = document.createTextNode('Print the Page');
print_function_link.appendChild (print_function_link_text);
print_function.appendChild (print_function_link);
print_page.appendChild(print_function);
}
});
function print_preview() {
// Switch the stylesheet
setActiveStyleSheet('Print Preview');
// Create preview message
add_preview_message();
// Print the page
window.print();
}
function add_preview_message(){
var main_content = document.getElementById('content');
var main_body = main_content.parentNode;
if (document.getElementById){
var preview_message = document.createElement('div');
preview_message.id = 'preview-message';
// Create Heading
var preview_header = document.createElement('h3');
var preview_header_text = document.createTextNode('This is a print preview of this page');
preview_header.appendChild(preview_header_text);
// Create paragraph
var preview_para = document.createElement('p');
var preview_para_text = document.createTextNode('Without this message of course. ');
var cancel_function_link = document.createElement('a');
cancel_function_link.onclick = function() { cancel_print_preview(); return false; };
cancel_function_link.setAttribute('href', '#');
var cancel_function_link_text = document.createTextNode('Return to the existing page.');
cancel_function_link.appendChild(cancel_function_link_text);
preview_para.appendChild(preview_para_text);
preview_para.appendChild(cancel_function_link);
// Put it all together
preview_message.appendChild(preview_header);
preview_message.appendChild(preview_para);
main_body.insertBefore(preview_message, main_content);
}
}
function cancel_print_preview() {
// Destroy the preview message
var print_preview = document.getElementById('preview-message');
var main_body = print_preview.parentNode;
main_body.removeChild(print_preview);
// Switch back stylesheet
setActiveStyleSheet('default');
}
Quindi, aggiungeremo un foglio di stile alternativo con title="Print Preview" ai nostri file HTML:
<link rel="alternate stylesheet" type="text/css" href="css/print-preview.css" media="screen" title="Print Preview" />
Questo foglio di stile (print-preview.css) si limita ad importare il foglio di stile ad hoc per la stampa che avremo realizzato in precedenza (print.css) e imposta gli stili per il messaggio di anteprima. Ecco il suo contenuto:
@import "print.css";
#preview-message {
display:block;
border:1px solid #666;
background:#eaeaea;
padding:2px 5px;
}
Questo messaggio è importante, perché fornisce un contesto per la nuova vista della pagina. Senza di esso, il nuovo foglio di stile caricato potrebbe causare una certa confusione nel visitatore che clicchi per sbaglio il link per l'anteprima di stampa.
Una migliore esperienza di stampa
Ecco allora un esempio (Nota del traduttore: l'esempio è stato tradotto in italiano e reso disponibile per il download). Ovviamente, non è una tecnica perfetta per ogni sito e bisogna necessariamente fare molti test con gli utenti per adattarlo a ciascuna situazione.
