[Webdesign] Définissez la taille du texte en fonction du nombre de mots

parFlorian publié le

En webdesign, l’équilibre est la règle. Notamment l’équilibre des pages au niveau de leur disposition (le fameux layout), qui doit présenter les choses sur des espaces prédéfinis.

Je pense notamment aux titres des billets d’un blog. Si un titre est un peu long, il va tout de suite prendre plusieurs lignes, ce qui peut avoir une incidence sur l’alignement des emplacements prévus à cet effets.

Une autre utilisation pourrait être l’harmonisation de la place prise par les extraits de billets. Si on a prévu 50 px de haut, certains extraits ne vont pas rentrer, là où d’autres vont se trouver au large.

 
Le site CSS-tricks a publié un petit bout de code qui réalise un équilibrage de la place prise par les textes en fonction du nombre de mots dans ceux-ci. Il réalise cette opération en ajustant la taille de la fonte.

Le développement a été réalisé pour jQuery et Mootools. Voici l’exemple avec jQuery.

$(function(){

    var $quote = $(".post p:first");

    var $numWords = $quote.text().split(" ").length;

    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $quote.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "24px");
    }
    else {
        $quote.css("font-size", "20px");
    }    

});

Un exemple live ici.

C’est artisanal mais cela peut servir.
Je me demande s’il y a un moyen de savoir quelle largeur prend une phrase en fonction de la fonte et de la taille avec l’un de ces frameworks.

Crédits: css-tricks