Dimensione del font variabile in base al contenitore

Alla collezione di script in jQuery si aggiunge una nuova applicazione che ho realizzato giorni fa:

DEMO

Come potete vedere, l’applicazione ha il compito di assegnare alle frasi una dimensione di font variabile in quanto dipenderà dalla lunghezza di questa e dalla larghezza del contenitore in cui le frasi si trovano!

Fissando un contenitore largo 350px (è il caso dello script di cui c’è il link sopra) lo script ricercherà quella dimensione di font necessaria per avere il link/frase di larghezza complessiva uguale a 350. La ricerca avviene passando in rassegna ogni dimensione attraverso un ciclo while che terminerà solo a larghezza raggiunta!

Questo ci permette di avere un contenitore di link, o semplici frasi, originale e “compatto”.

Dal punto di vista strutturale si tratta di un semplice div contenente una serie di link. Attenzione ai tag <nobr>, questi impediscono alle frasi di esser mandate a capo.

Html

 
<div id="contenitore"><nobr>
            <a href="#" class="line"><label>Font's dimension is variable</label></a>
            <a href="#" class="line"><label>jQuery</label></a>
            <a href="#" class="line"><label>Interesting</label></a>
            <a href="#" class="line"><label>Script</label></a>
            <a href="#" class="line"><label>Hope you like this script</label></a>
            </nobr>
</div>
 

Analizziamo lo script: attraverso il ciclo each() viene elaborato ogni link contenuto nel div contenitore; l’elaborazione consiste di un ciclo while in cui viene testata la dimensione del font che per ogni ciclo sarà incrementata di 1px e da cui si uscirà nel momento in cui la larghezza complessiva, che sarà variata a seguito del cambio di dimensione del font, sarà pari a quella del contenitore in cui i link si trovano. In questo modo le frasi lunghe avranno un font di piccole dimensioni e le frasi più corte,o le singole parole, saranno molto più grandi, in tal modo alla fine tutti i link avranno la stessa larghezza complessiva!

jQuery

 
$(document).ready(function()
{
            var x = 0;
            var remove = 'px';
            var elem;
            // assegna id
            $('.line').each(function()
            {
                       elem = $(this);
                       while(elem.width() < $('#contenitore').width())
         {
             // prendo fontsize attuale
             font_att = elem.css('font-size');
             //incremento
             font_att = parseInt(font_att.substr(0,font_att.length-2));
             font_att += 1;
              //aggiorno
            elem.css('font-size',font_att+'px');
         }
            });
});