Cette action permet d'adapter la taille, la hauteur de ligne et la graisse d'une police à la largeur du bloc le contenant.
Cela pourrait être fait avec les media-queries, mais 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
{up up text-fit=option_principale}texte{/up text-fit}- text_fit: sélecteur du bloc. ex: h1, h1.foo, #id, h2#id, ...
Définition des valeurs minimales/maximales
- 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
Divers
- 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.
Style CSS
- tag = div: balise par defaut
- id: identifiant
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
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).
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 | ||
|
<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 (div par défaut) | ||
| Afficher le texte selon une nouvelle règle | ||
|
<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." |
||
|
<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. | ||
|
<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 | ||
|
<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 |
||
|
<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=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
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.
upactionslist (1) div (3) text-fit (6) csv2table (3) html (1) jcontent-info (1)