Il 19 agosto scorso l'Alertbox di Jacob Nielsen, stranoto guru dell'usabilità, aveva un tono e un titolo davvero batteglieri: "Facciamo scegliere agli utenti la dimensione dei font".
Premessa: un testo troppo piccolo è una specie di catastrofe dell'usabilità. I costruttori di software non rendono facile, da questo punto di vista, la vita del povero utente. Nielsen ricorda i bei tempi di Explorer 4, browser che aveva ben visibile sulla barra degli strumenti un comodo pulsante per ridimensionare il testo, tutto per il piacere della nostra vista. Questa feature è sparita nelle versioni successive di Explorer. Meglio: si è nascosta tra i menu del browser, mandando al diavolo la facilità d'uso e l'intuitività.
Un utente che voglia ingrandire il testo in Explorer 5/6 deve compiere ben 6 operazioni contro il semplice click della versione 4. Last, but non least, ci si mettono quei maledetti dei web-designer che usano addirittura i CSS, strumento definito da Nielsen "harmful", ovvero pericoloso e dannoso. Se si imposta la dimensione in pixel gli utenti di Explorer per Windows non potranno ridimensionare il testo nemmeno con la complicata manovra in sei passi che parte dal menu "Visualizza".
Su questo punto Nielsen toppa alla grande. In Mozilla, Netscape 6, Opera, Explorer 5 Mac e su tanti altri browser, è possibile ridimensionare anche il testo espresso in pixel. Semplicemente: qui i CSS non c'entrano nulla, è Microsoft che ha incredibilmente mantenuto questo comportamento assurdo sul suo browser di punta.
Per il resto le considerazioni sono tutte sensate e giuste, così come la battaglia che Nielsen ha intenzione di promuovere per sollecitare Microsoft a tornare sui suoi passi. Il punto di partenza rimane: ridimensionare il testo è complicato, poco intuitivo. Non conosco l'esistenza di statistiche su questo aspetto, ma credo che non siano molti gli utenti che sanno davvero che si può fare e come si può fare.
Sollecitato da questa lettura, mi sono detto: ma è possibile offrire agli utenti una soluzione semplice a questo problema? La risposta è ovviamente si. Ma essa dovrebbe per me avere alcuni requisiti:
- La formattazione del testo va fatta con i CSS
- L'unità da usare sono i pixel, perchè alla fine pongono meno problemi di compatibilità cross-browser
- L'opzione deve essere visibile e facile da usare
- Il ridimensionamento deve essere dinamico e al volo
Tecnicamente, il tutto si può realizzare con la combinazione di Javascript e CSS, che a dispetto di quanto affermato da Nielsen, sono uno strumento flessibile e facilmente modificabile. A livello di layout e organizzazione del documento si può pensare a un piccolo pannello da cui si possono impostare questa e altre opzioni di visualizzazione. Prima di passare all'esame della nostra applicazione, vediamo le possibili alternative.
Usare stili alternativi
Una prima soluzione potrebbe essere quella di usare fogli di stile alternativi. In pratica, si impostano un CSS principale e uno o più alternativi, tramite l'attributo "rel", che conterranno dimensioni dei font diverse dal primo:
<link rel="stylesheet" title="main" type="text/css" href="stile_principale.css" />
<link rel="alternate stylesheet" title="altstyle" type="text/css" href="stile_alternativo" />
Lo stile definito come "alternativo" viene caricato solo a richiesta, con poche righe di Javascript. Per un esempio di utilizzo e per il codice Javascript, potete, tra gli altri, visitare il sito di A List Apart, la webzine curata da Jeffrey Zeldman.
Questo approccio ha secondo me un punto debole: se vogliamo offrire molte opzioni e dare dinamicità è necessario scrivere diversi CSS. Per il resto funziona bene.
Usare il DOM: getElementById
Una seconda tecnica sfrutta il DOM per rintracciare e modificare gli attributi di un determinato elemento con l'istruzione getElementById (altri metodi sono possibili, questo è il più semplice). Lo svantaggio di tale opzione è che così si possono modificare solo gli stili detti "inline", ovvero quelli definiti tramite l'attributo "style":
<div id="contenuto" style="font-family: Arial, Helvetica;
font-size: 18px;">
O quelli in cui la dimensione sia impostata direttamente con Javascript. Un articolo presente sul sito di Apple Developer potrà chiarirvi molti aspetti della questione.
Concludendo, questa tecnica non ci consente di sfruttare gli enormi vantaggi dei CSS esterni, sui quali non ha alcun effetto.
Noi useremo invece un altro metodo, molto più diretto. Vediamolo.
Usare l'oggetto styleSheets
Il metodo che andremo ad utilizzare si basa sull'uso dell'oggetto styleSheets. Su di esso trovate in questa sezione un Cambiare al volo i fogli di stile di William Verdolin: chiaro, completo, ricco di esempi.
È una lettura obbligatoria e il codice che andremo a imparare è in parte basato su quello fornito negli esempi allegati. Le modifiche fatte dal sottoscritto ci consentiranno di dare maggiore dinamicità all'applicazione e una più vasta possibilità di scelte per l'utente. Prima di tutto però iniziamo con una definizione dell'oggetto styleSheets citata dall'articolo di Verdolini: "L'oggetto stileSheets è una collezione dell'oggetto document che contiene tutta la lista dei fogli di stile incorporati ed esterni. Questa collezione permette non solo di recuperare gli stili contenuti nei css, ma anche di modificarli dinamicamente".
Per chiarire il funzionamento della nostra applicazione, osservate subito il file di esempio.
A destra il nostro piccolo pannello (mi si perdoni lo "squallore" grafico). Cliccando su "Aumenta" ingrandiamo ogni volta di due pixel la dimensione del font. Abbiamo pensato anche di settare un limite: la dimensione cessa di essere ingrandita quando è uguale a 16 pixel. La stessa cosa accade con "Diminuisci": il testo si ridimensiona ad ogni click di due pixel fino alla dimensione minima di 8 pixel. L'ultimo link, "Cambia font" consente di passare dalla famiglia Sans-serif a quella Serif (i due font predefiniti sono rispettivamente Verdana e Georgia). Tutti i parametri (fattore di ingrandimento, dimensione massima e minima, famiglia di font sono ovviamente impostabili a piacere).
Come procedere
Per prima cosa abbiamo disegnato la struttura della pagina. Si tratta di tre semplici riquadri (div) ciascuno con il proprio id: #testata, #pannello, #contenuto. Il testo che vogliamo ridimensionare è proprio quello del box centrale, #contenuto. Dalla struttura allo stile. La formattazione e il posizionamento dei vari elementi sono contenuti in foglio di stile esterno, "stile.css". Il CSS è contenuto nel file allegato e scaricabile, per cui dateci con calma un'occhiata quando desiderate. Per il momento è importante evidenziare un aspetto:
#contenuto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #CCCCCC;
padding: 20px 30% 20px 20px;
border-top: 1px dashed #000000;
}
#testata {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
background-color: #CCCCCC;
padding: 15px;
border-bottom: 1px dashed #000000;
border-top: 1px dashed #000000;
}
Sono le prime righe del nostro foglio di stile, quelle che contengono le regole per i div #contenuto e #testata.
Ora, l'oggetto styleSheets non opera sui nomi dei CSS o delle singole regole, ma su una collezione (array). Semplificando: nel nostro CSS la rule che definisce il div #contenuto è la prima e avrà quindi come indice 0. Con l'indice 1 indicheremmo la seconda rule, quella del div #testata e così via. Allo stesso modo si identificano i fogli di stile incorporati nella pagina.
Per modificare al volo la dimensione dei font di #contenuto bastano poche righe di codice Javascript che andiamo subito a esaminare passo per passo.
Ecco il JavaScript che si occupa di cambiare al volo la dimensione dei font.
<script type="text/javascript" language="JavaScript">
<!--
ok = (document.styleSheets) ? 1 : 0;
IE = ((ind1 = navigator.appVersion.indexOf("MSIE")) > -1)
? 1 : 0;
IE4 = (IE && document.all) ? 1:0;
NN = (navigator.appName.indexOf("Netscape")>-1) ? 1 : 0;
NN4 = (NN && document.layers) ? 1 : 0;
NN6 = (NN && document.getElementById) ? 1:0;
if(ok) {
if(IE4) stile = document.styleSheets[0].rules
if(NN6) stile = document.styleSheets[0].cssRules
}
L'inizio dello script è preso dagli Cambiare al volo i fogli di stile. Si tratta di creare una variabile per verificare il supporto dell'oggetto da parte del browser e di superare piccoli problemi di compatibilità nella sintassi. Con l'ultima istruzione si crea una variabile (stile) che rappresenta il set completo di regole contenute nel primo CSS della pagina (notate l'indice 0). Vi rimando all'articolo per ulteriori approfondimenti.
Subito dopo si crea una funzione ("aumenta") che sarà richiamata tramite un semplice link (potete ovviamente usare anche pulsanti):
function aumenta() {
if(ok) {
var size = stile[0].style.fontSize.substring(0,2)
var dimFont = parseInt(size,10)
dimFont += 2;
{
if (dimFont > 16) dimFont = 16;
}
stile[0].style.fontSize = dimFont + 'px';
}
else
alert("l'oggetto styleSheetsnNONnè supportato")
}
Per prima cosa si verifica il supporto. Se stileShets è supportato viene eseguita la funzione, altrimenti viene visualizzato un alert.
Nella parte centrale dello script si definiscono subito due variabili. La prima è size. Qui abbiamo bisogno di sapere a quanti pixel è stata impostata la grandezza del font per il div #contenuto. Ricordate? È la prima regola, pertanto impostiamo come indice [0]. Ma c'è una seconda difficoltà. La natura dello script prevede una somma: aggiungere 2 ad ogni click! Abbiamo dunque la necessità di convertire in numero (12) una stringa (12px). Per prima cosa, dunque, usiamo la funzione substring(0,2). Essa ci restituirà i primi due caratteri della stringa relativa alla dimensione dei font. Ora , da 12px, abbiamo semplicemente 12.
Ma a noi serve un numero! Ed ecco la seconda variabile (dimFont). Qui usiamo la funzione parseInt per convertire il valore di size in un numero intero. D'ora in poi con dimFont indicheremo la misura del font.
Con l'istruzione dimFont += 2 definiamo invece il fattore di incremento della dimensione. Stabiliamo inoltre (if (dimFont > 16) dimFont = 16;) che se la misura dovesse superare i 16 pixel essa sarà automaticamente settata a 16 e non potrà essere più ridimensionata (il limite di cui parlavamo prima).
Infine impostiamo la dimensione che andrà a sovrascrivere quella di default del foglio di stile. Essa sarà uguale al valore della variabile dimFont. Ma attenzione! Perchè abbia un senso in un CSS è necessario impostare un'unità di misura. Un piccolo segno '+' di concatenamento, una stringhetta ('px') ed il gioco è fatto. L'unità di misura che prima avevamo eliminato torna al suo posto.
Per diminuire le dimensioni dei font, basterà creare una seconda funzione (nell'esempio la chiamo "diminuisci"). Identica alla prima salvo che in due punti. Il fattore di incremento sarà questa volta negativo (dimFont -= 2;) e il limite minimo conterrà un segno di minore (if (dimFont < 8) dimFont = 8;). Trovate comunque tutto nel codice della pagina.
Per modificare l'aspetto dei font, la funzione è cambia_font e questo è il codice:
function cambiaFont() {
if (stile[0].style.fontFamily == "Verdana, Arial, Helvetica, sans-serif")
stile[0].style.fontFamily = "georgia,times,times new roman,serif";
else
stile[0].style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";
}
A livello di codice HTML sarà necessario, infine, richiamare le tre funzioni. Così:
<p><a href="javascript:aumenta()">Aumenta!</a><br
/>
<a href="javascript:diminuisci()">Dimunuisci!</a></p>
<p><a href="javascript:cambiaFont()">Cambia font!</a></p>
Ovviamente, tutto funziona anche inserendo il codice Javascript in un file .js esterno.
L'esempio funziona su tutti i browser attualmente più diffusi, tranne che su Opera, che comunque promette di incorporare finalmente un supporto decente di DOM e Javascript nell'imminente funzione 7.
Considerazioni finali
Spero che l'articolo abbia ottenuto uno scopo: far capire quanto sia semplice implementare una soluzione di questo tipo. E quali sono i vantaggi: posso usare CSS esterni, posso usare i pixel, miglioro l'accessibilità del sito.
Proprio mentre preparavo l'articolo mi sono trovato a visitare un paio di siti che offrono funzioni simili a quelle qui presentate. Il primo è il sito del Governo italiano. Che dovrebbe essere, nelle intenzioni dei curatori, pienamente accessibile. E in effetti sotto certi aspetti lo è. Per esempio, offre ai visitatori la possibilità di personalizzare gli aspetti visuali. Peccato che per farlo bisogna indovinare che cliccando sul link "Personalizza" si ha la possibilità di ingrandire il testo o di scegliere una visualizzazione a contrasto elevato (esiste l'attributo title, signori!). Per inciso, la tecnica usata è quella dei fogli di stile alternativi: nel primo (corrispondente all'opzione Standard) la dimensione è espressa in pixel, nel secondo (opzione Libero) in percentuale, dunque ridimensionabile anche in Explorer. Ma sempre con la criptica manovra spiegata da Nielsen. Buone intenzioni, ma realizzate male.
L'altro sito è quello di un giornale americano, The Sacramento Bee. Nelle pagine degli articoli è presente un pannellino delle opzioni non invasivo, a portata di mouse e facile da usare. Il metodo usato è il secondo di quelli proposti nell'articolo. Confrontate ed esprimete i vostri pareri. Alla prossima.
