Ridimensionare i caratteri con un click

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 poortunamente 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: Esempio

Condividi:

Gianluca Troiani

Nato a Roma nel Gennaio del '76, da alcuni anni cerco di conseguire una laurea in Ingegneria Elettronica. Ho iniziato a realizzare siti web utilizzando una quantità esagerata di immagini, tabelle ed "effetti speciali": una orribile confusione. Abbandonati i tool WYSIWYG, ho abbracciato la causa dell'accessibilità, dell'usabilità, del rispetto degli standard W3C. Da tempo mi diverto a sperimentare le potenzialità dei CSS come unico strumento di definizione dell'aspetto delle pagine web.  L'esperienza accumulata mi ha mostrato come i CSS siano (insieme all'XHTML) l'unica via di salvezza per i webmaster e gli utenti dei siti web, poiché l'utilizzo dei fogli di stile permette di realizzare siti web leggeri, accessibili, usabili, conformi agli standard W3C, facili da gestire, belli. Ho così deciso di realizzare un intero sito web (www.constile.org) dedicato all'uso avanzato dei CSS, on-line dal 16 Ottobre 2002. Il 4 Novembre 2002 ho ricevuto una proposta di collaborazione al progetto Webaccessibile.org. Onorato dalla richiesta, ho accettato con entusiasmo. L'obiettivo che mi sono posto partecipando al progetto è la realizzazione di articoli che mostrino come i CSS possano contribuire al miglioramento dell'accessibilità di quello straordinario mezzo di comunicazione di massa noto col nome di "Internet".