Ridimensionare i testi in base alla dimensione dello schermo con JQuery Fittext e Bigtext

FiText e BigText sono due semplici quanto utili plugin JQuery che hanno la funzione, ognuno in maniera differente, di modificare e adattare la dimensione dei testi in una pagina web, in un momento dove le risoluzioni si moltiplicano e dove i siti devono adattarsi a questa tendenza questi due plugin ti possono tornare comodi durante la progettazione del sito web:

JQuery FitText

Realizzato dagli sviluppatori che si sono occupati anche di LetteringJS questo plugin permette di adattare il testo contenuto nei tag HTML di interesse in base alla grandezza dello schermo del browser.
Si utilizza in maniera molto semplice: Per prima cosa bisogna richiamare la libreria JQuery tra i tag head della pagina web, in secondo luogo dobbiamo individuare i tag HTML che contengono i testi di nostro interesse, per esempio:

<div id="box">
<h1>Un titolo</h1>
<p>Paragrafo di testo...</p>
</div>

Infine dobbiamo inserire tra i tag script le istruzioni necessarie per fare funzionare il plugin:

<script type="text/javascript">
		$("#box").fitText(1.2);
</script>

Dove #box è il div che sarà colpito mentre 1.2 è il valore di compressione del font durante il ridimensionamento della finestra browser, quindi tutti i testi conenuti dentro il div #box verranno ridimensionati automaticamente al ridimensionarsi della finestra del browser.

JQuery BigText

Questo plugin invece prendendo come riferimento la larghezza di un elemento HTML modifica tutti i testi contenuti in questo elemento adattandoli il larghezza (giustificazione) e contemporaneamente modificandone la dimensione:
Quindi, in parole semplici, più la frase o parola sarà lunga più la dimensione del testo sarà piccola, viceversa più la parola sarà breve più la dimensione sarà grande.
Segui questo link e prova a modificare i testi dentro i div per osservare come big text modificherà le dimensioni.
Questo plugin si utilizza in maniera molto semplice: Per prima cosa bisogna richiamare la libreria JQuery tra i tag head, in secondo luogo dobbiamo identificare tra i tag HTML quelli su cui vogliamo che BigText agisca, per esempio:

<div id="bigtext">
    <div>The elusive</div>
    <div>BIGTEXT</div>
    <div>plugin exclusively</div>
    <div>captured</div>
</div>

Infine dobbiamo inserire tra i tag script le istruzioni necessarie per fare funzionare il plugin:

<script type="text/javascript">
		$('#bigtext').bigtext();
</script>

BigText dispone di altre diverse funzioni per intervenire sui testi e personalizzare gli effetti, per una guida ti rimando alla pagina dedicata su GitHub

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco