jQuery fitText è un plugin che ridimensiona il testo a cui è applicato in base alla dimensioni della finestra in cui viene visualizzato.

Può essere usato nei layout fluidi o in quelli che si adattano alla risoluzione del monitor (tramite media queries) per ridimensionare il testo dell’intestazione.

Come usare jQuery fitText

L’esempio seguente mostra come applicare jQuery fitText a un titolo, un elemento h2. Il risultato dell’esempio può essere visualizzato nella demo.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image replacement | Sintesi-design.it</title>
</head>
<body>

      <!-- Altri contenuti del documento ... -->

       <h2 class="fittext">Sintesi-design.it</h2>

      <!-- ... Altri contenuti del documento -->

      <script src="js/jquery-1.9.1.min.js"></script>
      <script src="js/jquery.fittext.js"></script>

      <script>
        $(function(){ // Attende che il DOM sia pronto ...
            // Seleziona gli elementi con classe = fittext e attiva il plugin
            $(".fittext").fitText(); 
        });
      </script>  

</body>
</html>

Analizziamo in dettaglio il codice dell’esempio.

Il testo a cui applicare il plugin è l’elemento h2 con la classe .fittext.

<h2 class="fittext">Sintesi-design.it</h2>
È possibile associare jQuery fitText a qualsiasi elemento di tipo blocco. Se si desidera applicare jQuery fitText a un elemento in linea usare la proprietà display con il valore block e impostare la proprietà width al 100%.

Alla fine del documento, subito prima della chiusura dell’elemento body, sono presenti tre elementi script.

Gli elementi script sono posizionati in fondo al documento per rendere più veloce la visualizzazione del documento nel browser ma possono essere collocati anche in altri punti della pagina senza compromettere il funzionamento del plugin.

I primi due sono usati per includere nel documento jQuery e fitText.

<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.fittext.js"></script>

L’ultima versione di jQuery e di jQuery fitText può essere scaricata dai relativi siti ufficiali:

Il terzo elemento script contiene le istruzioni che attivano il plugin.

<script> 
$(function(){ // Attende che il DOM sia pronto...
    // Seleziona gli elementi con classe = fittext e attiva il plugin
    $(".fittext").fitText(); 
});
</script>

La prima istruzione attende che il documento sia pronto per essere manipolato.

L’istruzione successiva seleziona tutti gli elementi con classe .fittext e gli applica il metodo fitText() che si occupa del ridimensionamento del testo.

Si è utilizzata una classe in modo da poter applicare il plugin a più elementi con una sola istruzione ma è possibile utilizzare qualsiasi altro selettore riconosciuto da jQuery.

Visualizzare il documento nel browser e provare a ridurre le dimensioni della finestra per vedere come il testo si ridimensiona.

Visualizza la demo

Controllare il comportamento di jQuery fitText

Il comportamento di jQuery fitText può essere controllato con due parametri. Il primo parametro è un valore numerico che consente di rendere l’adattamento del testo più o meno marcato.

Inserire un valore minore di 1, che è il valore predefinito, per un effetto più marcato.

$(function(){
  $('#logo').fitText(0.9); 
});

Visualizza la demo

Inserire un valore maggiore per un effetto più morbido.

$(function(){
  $('#logo').fitText(1.5); 
});

Visualizza la demo

Il secondo parametro è un letterale in cui indicare la dimensione minima e massima del testo.

$(function(){
   $('#logo').fitText(1,{
     minFontSize: '24px', 
     maxFontSize: '50px'
   }); 
});

La variazione oscillerà tra questi valori. La dimensione del carattere deve essere espressa in pixel.

Visualizza la demo

Altre informazioni sono disponibili nel sito ufficiale di fitText.