frendeitpt

text-fit

Cette action permet d'adapter la taille, la hauteur de ligne et la graisse d'une police à la largeur du bloc le contenant.

Par rapport aux mediaqueries qui permettent aussi d'adapter un texte à la largeur de l'écran, notre méthode permet :

  • d'adapter la règle au cas par cas en fonction de la longueur du texte
  • une variation progressive de la taille. Fini les breakpoints de médiaqueries
  • un calcul basé sur le bloc contenant et non la largeur de l'écran
🆙 text_fit : Ajuste un texte à son conteneur

Cliquer pour lire la documentation

syntaxe {up up text-fit=option_principale}texte{/up text-fit}
version UP-2.2 author LOMART license GNU/GPLv3 credit script Textblock de glyphic-co tags font
  • text_fit: sélecteur du bloc. ex: h1, h1.foo, #id, h2#id, ...
  • blocsize = 320-960: largeur mini-maxi en px du bloc conteneur
  • fontsize = 1-1.8: taille mini-maxi en em de la police. Autre unité : em,rem,px,ex,%,vh,vw. ex : 16-32px
  • lineheight = 1.33-1.25: hauteur de ligne mini-maxi. facteur multiplicateur de la taille de la police
  • fontweight: graisse mini-maxi si police variable. ex: 400-900
  • fontfile: chemin vers le fichier d'une police de caractère
  • fontclass: nom de la classe attribué à la police
  • container = parent: bloc utilisé pour calcul blocsize. parent ou self.
  • tag = div: balise par defaut
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): style ajouté dans le HEAD de la page
    Modifiez la taille de votre navigateur pour voir les modifications apportées par cette action

    Une démonstration pour commencer

    On utilise surtout cette action pour contrôler la présentation des titres plus finement qu'avec les médiaqueries. Si vous redimensionnez votre navigateur, vous verrez que la taille du texte varie progressivement et non par palier (breakpoint).

    Texte redimensionné en fonction de la taille de son conteneur parent
    Texte redimensionné en fonction de la taille de son conteneur parent

    Même si le rendu est différent, les deux pavés gris ci-dessus utilisent le même code et les mêmes règles CSS.

    Vous pouvez le constater dans le code ci-dessous. La seule différence est que le deuxième pavé est inclus dans bloc occupant 50% de la largeur.

    {up text-fit | class=box-gris}Texte redimensionné en fonction de la taille de son conteneur parent{/up text-fit}
    {up div=w50 mcenter}{up text-fit | class=box-grisPale}Texte redimensionné en fonction de la taille de son conteneur parent{/up text-fit}{/up div}

    Par simplification, nous utilisons les valeurs par défaut des options :

    Option valeur commentaires
    blocsize 320-960 largeur mini-maxi du bloc conteneur. Toujours en px
    fontsize 1-1.8 taille mini-maxi de la police. par defaut en em.
    Il est possible de spécifier une des unités suivantes : em,rem,px,ex,%,vh,vw. Exemple 16-28px
    lineheight 1.33-1.25 hauteur de ligne mini-maxi sous la forme de coefficient de la taille de la police
    fontweight graisse mini-maxi pour les polices dites "variables". Exemple : 100-900.
    Vérifiez les valeurs autorisées qui vont en général de 100 (thin/fin) à 900 (black) en passant par 400 (regular/normal) et 700 (bold/gras)

    Dans notre exemple, la taille de la police sera de 1em si le bloc est de 320px. Elle variera de façon régulière jusqu'à 1.8em pour un bloc de 960px.

    La hauteur de ligne varie également de 1.33 à 1.25 fois la taille de la police.

    Modes d'utilisation

    Pour bien comprendre le rôle de cette action, voyons les diverses façons de l'utiliser.

    Shortcode HTML généré Sélecteur du script JS
    le plus simple
    {up text-fit}texte{/up text-fit} <tag class="id">texte</tag> .id
    On crée une instance unique avec les valeurs par défaut de l'action. tag est la valeur de l'option tag
    Afficher le texte selon une nouvelle règle
    {up text-fit=h1 | blocsize=400-900}texte{/up text-fit} <h1>texte</h1> h1
    la présence d'au moins une des options blocsize, fontsize, lineheight, fontweight indique que l'on veut créer une nouvelle règle.
    Dans cet exemple, toutes les balises h1 de la page suivront cette règle."
    {up text-fit=h1.foo | blocsize=400-900}texte{/up text-fit} <h1 class="foo">texte</h1> h1.foo
    idem à l'exemple précédent, mais seules les balises h1 avec la classe foo sont concernées.
    {up text-fit=#id | blocsize=400-900}texte{/up text-fit} <tag class="id">texte</tag> .id
    #id indique que l'on utilise l'ID du shortcode. La règle créée ne concernera que ce shortcode. Si la balise n'est pas spécifiée (ex h2#id), on utilise celle définie dans l'option tag.
    Une règle sera toujours créée, même sans mention d'une des options blocsize, fontsize, lineheight ou fontweight
    Utiliser une règle existante
    {up text-fit=h1}texte{/up text-fit} <h1>texte</h1> aucune règle
    Sans une des options blocsize, fontsize, lineheight, fontweight aucune règle n'est créée. On utilise la règle en cours.
    Il faut considérer cette forme comme une facilité pour saisir du code HTML. Le shortcode  {up html=h1}texte{/up html} produit le même résultat
    {up text-fit=h1.foo}texte{/up text-fit} <h1 class="foo">texte</h1> aucune règle
    idem à l'exemple précédent, mais seules les balises h1 avec la classe foo sont concernées.

    Police spécifique

    Les options fontclass et fontfile facilitent la définition et l'utilisation d'une police de caractère spécifique.

    Le principe est que si l'option fontfile contient un chemin vers une police de caractères, l'action va créer les règles CSS pour utiliser cette police.

    La classe pour l'utiliser est indiquée par fontclass. Si le nom n'est pas spécifié, on utilise le même nom que l'ID. Dans ce cas, il ne sera pas possible de l'utiliser ailleurs.

    Un titre avec la police variable Podkova

    {up text-fit=h1.foo
     | fontsize=1-3
     | blocsize=200-800
     | fontweight=100-900
     | fontfile=/font/Podkova-VariableFont_wght.ttf
     | fontclass=podkova | class=box-gris;color:red} Un titre avec la police variable Podkova {/up text-fit}

     

    un autre texte avec la police Podkova

    Le texte ci-dessus est obtenu avec ce shortcode qui spécifie la classe définie dans l'exemple précédent.

    {up text-fit=h1.foo | class=podkova}
    un autre texte avec la police Podkova
    {/up text-fit}

    h1.foo est le sélecteur pour text-fit qui doit être identique à celui utilisé pour la définition.

    Astuce

    Pour réutiliser une règle en conservant la présentation CSS, il faut rédiger le shortcode en utilisant l'option css-head qui va définir les propriétés CSS pour le sélecteur h1.foo2 (le même que celui du script JS) :

    foo2 - Un titre avec la police variable Podkova

    {up text-fit=h1.foo2
     | fontsize=1-3 | blocsize=200-800 | fontweight=100-900
     | fontfile=/font/Podkova-VariableFont_wght.ttf  | fontclass=podkova
     | css-head=h1.foo2[background:lightgray;padding:10px;color:red;font-family:"podkova"]}
    foo2 - Un titre avec la police variable Podkova
    {/up text-fit}

    Ce shortcode va afficher un autre titre en reprenant les attributs JS et CSS de h1.foo2

    {up text-fit=h1.foo2}une réutilisation de la règle h1.foo2{/up text-fit}

    une réutilisation de la règle h1.foo2

    Il est aussi possible d'utiliser l'action HTML ou son équivalent HTML (<h1 class="foo2">) pour réutiliser la règle h1.foo2

    {up html=h1.foo2}Idem avec l'action HTML{/up html}

    Idem avec l'action HTML

    Suggestion

    Si vous voulez définir des règles valides sur tout le site, utilisez le module LM-Custom en position debug.
    Ajoutez le ou les shortcodes dans la zone HTML du module.

    Les options

    Option valeur* commentaires
    option principale sélecteur du bloc sur lequel agir. exemple : h1, .titre, #foo
    blocsize 320-960 largeur mini-maxi du bloc conteneur. toujours en px
    fontsize 1-1.8 taille mini-maxi de la police. par defaut en em.
    Il est possible de spécifier une des unités suivantes : em,rem,px,ex,%,vh,vw. Exemple 16-28px
    lineheight 1.33-1.25 hauteur de ligne mini-maxi sous la forme de coefficient de la taille de la police
    fontweight graisse mini-maxi pour les polices dites "variables". Exemple : 100-900.
    Vérifiez les valeurs autorisées qui vont en général de 100 (thin/fin) à 900 (black) en passant par 400 (regular/normal) et 700 (bold/gras)
    container parent parent ou self définit le bloc utilisé par blocsize
    id uniquement si vous voulez personnaliser l'ID par défaut
    class
    style
    règles CSS pour personnaliser la présentation
    css-head style ajouté dans le HEAD de la page

    * il s'agit des valeurs par défaut pour la version livrée avec UP. Votre webmaster a pu les personnaliser.