Semblerait que votre Javascript est désactivé. Ce site requiert Javascript pour son bon fonctionnement.

Plugin Mootools pour redimensionner la police d'écriture

 

Je suis tombé sur un plugin fort intéressant en Jquery de Dave Rupert. Je l'ai donc transposé en Mootools pour pouvoir moi-même l'utiliser.



FixText rend la grosseur de la police d'écriture flexible aux browsers. Il est avantageux d'utiliser ce plugin avec un "fluid Layout" pour que son texte se redimensionne selon la largeur de son parent.

DÉMO TÉLÉCHARGER LE CODE

Comment ça fonctionne

Si vous travaillez sur un "fluid design", vous n'avez qu'à prendre n'importe quel élément titre et lui mettre un ID. Vous ajoutez ce script en bas de votre page avec ce même ID.

<script>
    fitText('nom_du_ID');
</script>


N'oubliez pas d'ajouter le fichier fittext.js à votre page. Votre titre va se dimensionner selon son item parent (par défaut environ 1/10 de la largeur de l'élément parent).

Le "compresseur"

Voici un autre exemple avec un "compresseur".

<script>
    fitText('nom_du_ID', 1.2);
</script>


Par défaut l'ajustement est de 1, ce dernier donne un bon rendement. Cependant si vous rencontrez quelques problèmes, que votre redimensionnement est un difficile, vous pouvez ajuster un peu le "compresseur". Ce dernier fonctionne un peu comme une ampli de guitare.
La police d'écriture va se redimensionner plus ou moins agressivement selon le chiffre.

CSS

Ajuster votre titre avec un width:100%. Si vous mettez un font-size, ce dernier va agir un peu comme un max-font-size.
Jusqu'à maintenant fitText semble marcher avec les autres propriété comme le text-shadow.

Pour plus de détails, ou la version original en JQuery, aller sur le fittextjs.com/

Tag(s):
Javascript Il n'y a pas de commentaires pour cet article.
 

Ajouter un commentaire

Username: