Ridimensionare i caratteri con un click
Nell'articolo "Dimensionare i caratteri con i CSS", sono state illustrate diverse possibili scelte per impostare la dimensione dei font di un articolo e si è accennato riguardo la possibilità di ridimensionare i caratteri "al volo" tramite i CSS e il JavaScript.
In questo articolo vedremo come migliorare l'accessibilità di un sito consentendo agli utenti di ridimensionare i caratteri con un click, facendo uso dei CSS e del DOM tramite JavaScript.
L'importanza di poter ridimensionare i caratteri
Spesso molti webmaster, o presunti tali, operano con monitor molto grandi, usano colori poco contrastanti e utilizzano font dalle dimensioni molto ridotte. Come conseguenza un utente che visiti un sito con con caratteri piccoli e poco contrastanti e che non abbia un'ottima vista (per quanto mi riguarda ho una vista eccellente ma non sempre riesco a leggere ben le pagine di molti siti) ha due sole possibilità: sforzare la vista, abbandonare il sito. Certo molti browser offrono l'opportunità di ingrandire i caratteri dello schermo, ma quanti utenti di suddetti browser conoscono tale opportunità? Tutto sarebbe molto più semplice se ci fosse un link da attivare che modificasse la dimensione dei font del sito che si sta visitando senza dover ricorrere ai menu. Sarebbe inoltre bello che il sito ricordasse qual è la dimensione dei font preferita da ogni utente. Tutto questo è possibile con un intelligente uso dei CSS e lo sfruttamento del DOM, attraverso un semplice script. Guardate la pagina di esempio e capirete subito le potenzialità di questo strumento.
Come impostare la dimensione dei caratteri
Nel foglio di stile si dovrà optare per le unità di lunghezza relative. Il BODY dovrà avere la dimensione dei font espressa in unità percentuali (nota: nel body è preferibile utilizzare unità percentuali rispetto le unità em, a causa di un comportamento bizzarro di IE quando si ridimensionano i caratteri con il menu "Visualizza > Carattere"), gli altri selettori dovranno avere la dimensione dei font espressa in unità percentuali o in unità em. Ad esempio:
body { font-size: 80%; }
h1 { font-size: 2em; }
.nota { font-size: 0.9em; }
In questo modo, modificando la dimensione del font del BODY, sarà possibile modificare la diemensione dei font di tutti gli elementi della pagina. Per modificare la dimensione del font del BODY sfrutteremo il DOM tramite JavaScript.
Il codice JavaScript
Per modificare la dimensione dei font utilizzeremo il seguente codice JavaScript [scarica il file] che, oltre ad apportare le modifiche necessarie, memorizza in un cookie la dimensione del font desiderata.
function createCookie(name,value,days) {
// istruzioni per creare il cookie, non interessa ai fini dell'articolo
}
function readCookie(name) {
// istruzioni per leggere il cookie, non interessa ai fini dell'articolo
}
function setFontSize(size) {
var body = document.getElementsByTagName('body')[0];
var percentuale = "80%"; // default
if (size == 1) percentuale = "70%";
if (size == 2) percentuale = "80%";
if (size == 3) percentuale = "90%";
if (size == 4) percentuale = "100%";
if (size == 5) percentuale = "110%";
body.style.fontSize = percentuale;
createCookie('TuoSitoFontSize',size,365);
}
window.onload = function() {
size = readCookie('TuoSitoFontSize');
setFontSize(size);
}
La funzione setFontSize()
La funzione setFontSize() è la funzione principale, essa si occupa di impostare la dimensione del font del BODY in base al valore della variabile size (passata come argomento della funzione La funzione setFontSize()) e di memorizzare tale dimensione in un cookie.
La prima operazione che la funzione sovlge è quella di memorizzare l'oggetto rappresentato dal tag BODY nella variabile body:
var body = document.getElementsByTagName('body')[0];
Successivamente, in base al valore della variabile size viene calcolato il valore, espresso in unità percentuali, da dare alla dimensione del font del BODY, di default si imposta la dimensione specificata nel foglio di stile (in questo caso 80%). Il valore calcolato è memorizzato nella variabile percentuale.
var percentuale = "80%"; // default
if (size == 1) percentuale = "70%";
if (size == 2) percentuale = "80%";
if (size == 3) percentuale = "90%";
if (size == 4) percentuale = "100%";
if (size == 5) percentuale = "110%";
Una volta calcolato il valore da dare alla dimensione del font del BODY, tale dimensione viene applicata attraverso l'istruzione:
body.style.fontSize = percentuale;
A questo punto il valore della variabile size viene memorizzato in un cookie:
createCookie('TuoSitoFontSize',size,365);
Come viene utilizzato il cookie
Quando una pagina viene caricata viene letto il valore della variabile size e viene richiamata la funzione setFontSize(). Se non è memorizzato nessun valore valido, viene usato il valore di default.
window.onload = function() {
size = readCookie('TuoSitoFontSize');
setFontSize(size);
}
Come invocare la modifica della dimensione del font
Per invocare la modifica della dimensione dei font si può utilizzare un link che invochi la funzione setFontSize() con un opportuno argomento:
<a href="javascript: setFontSize(1)">caratteri piccoli</a>
Limiti e suggerimenti
Lo script funziona solo con i browser che abbiano un valido supporto del DOM, come mozilla, IE5.5, IE6 (no Opera 6). I browser che non supportano opportunamente il DOM non avranno nessun tipo di problema.
Qualora si desiderasse non modificare la dimensione dei font di alcuni elementi (ad esempio i form), si può impostare la dimensione dei font in pixel.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
