È corretto (o consigliabile) inserire nel corpo di una pagina web widget o script che replicano funzionalità presenti di default sul browser? A che scopo infarcire il documento di link e pulsanti per impostare la pagina corrente come home page predefinita, per aggiungerla ai preferiti, per stamparla, per ridimensionare il testo quando tutto può essere fatto con la nostra copia di Internet Explorer, Firefox o Safari?
Le opinioni sono discordanti. Molti ritengono che sia più opportuno istruire l'utente su come ottenere il risultato desiderato nei casi menzionati sfruttando le funzionalità standard del browser. Ma è indubbio che vi siano circostanze in cui l'aggiunta di un piccolo script, che pure replichi una caratteristica del browser, possa portare dei vantaggi in termini di usabilità. Il plugin per la libreria jQuery di cui parleremo in questo articolo rientra in questa casistica.
Si chiama jPrintArea. È stato creato da Kamal e consente all'utente di stampare in maniera semplice solo una specifica porzione della pagina.
Ambiti di applicazione
Come molti sanno, esistono diverse soluzioni per offrire al lettore versioni della pagina ottimizzate per la stampa. Le più comuni si basano sull'utilizzo dei CSS con media="print" e sull'implementazione del classico sistema della 'versione per la stampa', come avviene su questo sito.
Questi metodi risultano (quasi sempre) ottimali in contesti come quelli di HTML.it e in generale dei siti che hanno nell'articolo il formato editoriale fondamentale. Il loro limite (da qui il 'quasi sempre'), dalla prospettiva dell'utente, è che il risultato finale è fissato in partenza dalle impostazioni dell'amministratore del sito. Un esempio. Sul blog di HTML.it è presente un CSS per la stampa tramite il quale vengono eliminate tutte le sezioni accessorie della pagina per lasciare spazio sulla carta solo al corpo dei post. Alcuni visitatori hanno però espresso il desiderio di poter stampare anche i commenti al post, che il CSS invece taglia.
E ancora. Leggendo un articolo tecnico posso magari contare su una pagina ad hoc per la stampa. Ma se volessi stampare solo un listato di codice tralasciando il resto? Per una soluzione efficace rispetto a questo punto si può fare riferimento a qualche esempio ottenuto con un plugin per WordPress come SyntaxHighlighter.
E ancora. Chi va sul sito di Trenitalia lo fa innanzitutto per cercare gli orari dei treni. Quello che presumibilmente vorrebbe stampare (e qui parla un utente insoddisfatto) è solo la tabella degli orari. Ecco invece nello screenshot cosa uno è costretto a stampare. Basterebbe un pulsantino in fondo: stampa la tabella.
Si potrebbe continuare, ma sono certo che ognuno di voi saprà richiamare alla mente più di una situazione in cui ha desiderato poter contare su un sistema simile.
Molti diranno: basta selezionare il testo che ci interessa e stampare solo quello. In effetti è una funzionalità presente sui principali browser, almeno su Windows. Su Mac OS X, purtroppo, non è presente né su Safari né su Opera, e per usarla su Firefox e Camino bisogna andare a cercarla nei meandri del box di dialogo della stampa, risultando così tutt'altro che evidente. E comunque, anche su Windows, non è detto che sia nota agli utenti meno esperti. Tutti buoni motivi per prendere in considerazione l'utilizzo di un plugin come jPrintArea.
Usare jPrintArea
L'uso di jPrintArea è di una semplicità disarmante. Partiamo dall'esempio. Per testare il plugin è stata adottata come base una tabella riccamente formattata con i CSS e frutto della creatività di Veerle Peters (che presenta la tecnica in A CSS styled table version 2).
Nella sezione head vengono innanzitutto richiamati i due file Javascript fondamentali per il funzionamento della tecnica, il pacchetto con la versione 1.2 di jQuery e il plugin jquery.jPrintArea.js:
<script type="text/javascript" src="jquery-1.2.pack.js"></script>
<script type="text/javascript" src="jquery.jPrintArea.js"></script>
Subito dopo troviamo il codice per inizializzare il plugin:
<script type="text/javascript">
$(document).ready(function(){
$('.link').click(function(){ $.jPrintArea('#tabella') });
});
</script>
All'elemento (un a) con classe "link" assegniamo l'evento click che richiama la funzione jPrintArea. Come parametro viene passato l'id dell'elemento che racchiude la porzione di pagina da stampare (nel nostro caso è un div con id="tabella").
Quanto al markup, ci sono due elementi cruciali di cui tenere conto.
La porzione di pagina che si intende far stampare va racchiusa in un elemento contenitore (va bene un div). È l'id di questo elemento contenitore che va passato come parametro per inizializzare la funzione. Nel nostro esempio troviamo in effetti questa situazione:
<div id="tabella">
<table>
<caption>Company X webhosting products overview</caption>
<thead>
.................
</table>
</div>
In fondo alla tabella, poi, è presente il link che farà partire la stampa:
<p><a href="#" class="link">Stampa la tabella</a></p>
Come si può notare, all'elemento a è stata assegnata la classe "link", in maniera corrispondente a quanto visto nel codice Javascript di inizializzazione. Il codice HTML rimane così pulito dal momento che non è necessario definire parti di codice Javascript nel contesto del markup.
Ad uso e consumo di chi voglia capire il meccanismo di funzionamento del plugin aggiungiamo il codice dello stesso:
jQuery.jPrintArea=function(el)
{
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
alert('Printing...');
document.body.removeChild(iframe);
}
A prescindere dalle considerazioni tecniche, è chiaro che l'implementazione di questo plugin su un sito richiede un'attenta analisi da parte dell'amministratore, che, sulla base dei contenuti che distribuisce, dovrebbe essere in grado di prevedere su quali elementi sia opportuno applicarlo (il caso citato della tabella degli orari sul sito di Trenitalia è per certi versi esemplare).
L'esempio (con i pacchetti Javascript, gli stili e le immagini usate) è disponibile per il download.
