Comment nous avons fait remplir l'écran à un menu Webflow, quelles que soient la largeur et la hauteur : une taille de police dynamique en CSS et JavaScript, deux démos CodePen, le code détaillé et un raccourci en CSS seul.
Salut les passionnés de Webflow ! Aujourd'hui, nous abordons un sujet qui nous tient à cœur : la taille de police dynamique, ou comment faire en sorte qu'une taille de police s'adapte à la fois à la largeur et à la hauteur du viewport. Oui, vous avez bien lu. Bon, on a un peu menti : nous avons en réalité dû résoudre un problème pour un client. Comme la plupart des contenus de la rubrique tutoriels de notre blog, nous racontons ce que nous avons dû faire pour régler un souci que Webflow ne règle généralement pas de façon native. En tant que designers Webflow, nous voulons toujours rester le plus no-code possible, mais parfois il faut passer au low-code.
Le défi
Plantons le décor. Vous avez un projet Webflow. Vous avez un menu (ce n'est pas forcément un menu, ce pourrait être simplement un titre, par exemple). Dans notre cas, c'était un joli menu avec une liste de noms de réalisateurs et une vidéo d'arrière-plan qui se lance au survol, et il y a un hic. Le client veut que le texte du menu occupe autant de largeur de page que possible, en fonction de l'élément de menu le plus long. Et vous ne pouvez pas utiliser la largeur du viewport pour la taille de police, car le texte doit remplir l'espace en fonction soit de la largeur, soit de la hauteur du viewport. Sinon, la page se met à défiler dès que le texte déborde du viewport. Ça paraît compliqué, non ? Voici un aperçu du menu pour vous donner une idée approximative de la façon dont il doit s'adapter lorsque la hauteur et la largeur de la fenêtre du navigateur changent.
<div style="padding:59.63% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/850500021?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Dynamic Font Size in Webflow to Fill Width or Height"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Eh bien, mes amis, c'est là que tout commence.
La solution
Voici JavaScript, notre fidèle acolyte. Avec une dose de JavaScript, une pincée de CSS et beaucoup de créativité, nous pouvons concocter une solution qui rend le texte de notre menu aussi large ou aussi « haut » que possible, quelle que soit la largeur ou la hauteur de l'écran. Vous remarquerez que notre version est un peu plus compliquée : les prénoms et les noms de famille des réalisateurs ont des polices et des graisses différentes, ils ne peuvent donc pas avoir la même taille de police. L'un est simplement plus grand que l'autre. Nous ajouterons aussi un exemple CodePen simplifié, avec une seule police, pour que vous puissiez expérimenter. Comme le texte du menu provient d'une collection CMS, notre guide pour créer des spans de texte dans les éléments de texte CMS dynamiques dans Webflow est un compagnon pratique si vous voulez styliser différemment certaines parties de ce texte.
Nous avons intégré ci-dessous deux CodePens avec les scripts que nous allons utiliser. Le premier est une version simplifiée, parfaite pour celles et ceux qui débutent ou qui n'ont qu'une seule police à ajuster. Le second est un peu plus avancé, un exemple idéal pour les amateurs de défis, pour ceux qui jouent avec plusieurs polices ou qui veulent voir comment aller plus loin. N'hésitez pas à y jeter un œil, à jouer avec le code et à voir la magie que nous allons créer. Le code du pen est modifiable pour les experts Webflow qui veulent expérimenter tout de suite.
L'exemple simple
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - Simplified for 1 Font" src="https://codepen.io/milkmoonstudio/embed/LYXMgLw?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYXMgLw">
Dynamic Font Size Based on Width and Height of Viewport - Simplified for 1 Font</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
// Let's start by declaring our function, adjustFontSize.
function adjustFontSize() {
// We're grabbing all the elements with the class name 'menu_item'.
var menuItems = document.querySelectorAll(".menu_item");
// We're getting the width and height of the viewport.
var viewportWidth = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
var viewportHeight =
Math.max(
document.documentElement.clientHeight || 0,
window.innerHeight || 0
) - 60;
// We're calculating the font size based on the width and height of the viewport.
var fontSizeBasedOnWidth = viewportWidth * 0.065;
var fontSizeBasedOnHeight = viewportHeight * 0.21;
// We're taking the smaller of the two font sizes calculated.
var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);
// Now, we're going through each menu item and setting the font size.
menuItems.forEach(function (item) {
item.style.fontSize = fontSize + "px";
});
}
// We're calling our function whenever the window is resized.
window.onresize = adjustFontSize;
// We're also calling our function when the document is ready.
document.addEventListener("DOMContentLoaded", adjustFontSize);Un exemple plus avancé de ce que nous avons fait
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - 2 Font Menu" src="https://codepen.io/milkmoonstudio/embed/abQPRjg?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/abQPRjg">
Dynamic Font Size Based on Width and Height of Viewport - 2 Font Menu</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Le décryptage
Décortiquons maintenant ces scripts comme s'il s'agissait de nouveaux pas de danse à la mode.
D'abord, nous déclarons une fonction appelée adjustFontSize(). C'est le cœur de notre opération, le moteur qui fera tourner notre menu dynamique.
<!-- fs-richtext-ignore -->function adjustFontSize() {
// ...
}
À l'intérieur de cette fonction, nous récupérons tous les éléments portant des noms de classe précis. C'est notre façon de dire : « Eh, on a besoin de vous un instant ! »
<!-- fs-richtext-ignore -->var menuItems = document.querySelectorAll('.menu_item');
Nous récupérons aussi la largeur et la hauteur du viewport. C'est comme demander : « De quel espace dispose-t-on pour jouer ? »
<!-- fs-richtext-ignore -->var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 60;
Ensuite, nous calculons la taille de police à partir de la largeur et de la hauteur du viewport. Les multiplicateurs sont nos ingrédients secrets pour obtenir la bonne taille. Nous retenons la plus petite des deux tailles calculées. C'est notre façon de dire : « Ne nous emballons pas trop avec la taille de police, d'accord ? » C'est ici qu'il faut expérimenter avec les deux valeurs pour obtenir le bon résultat, car cela varie selon la police et la longueur du texte. Les nombres de l'extrait ci-dessous sont des valeurs illustratives issues d'une version antérieure de notre script ; l'exemple simple ci-dessus utilise 0.065 et 0.21, et le CodePen avancé utilise 0.095 et 0.25, car chaque police demande son propre réglage.
<!-- fs-richtext-ignore -->var fontSizeBasedOnWidth = viewportWidth * 0.089;
var fontSizeBasedOnHeight = viewportHeight * 0.19;
var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);
Dans le script avancé, les noms de famille utilisent une autre police que les prénoms, nous leur donnons donc leur propre taille, calculée à partir de la taille du prénom avec un multiplicateur distinct (la valeur de l'extrait est illustrative, et le CodePen avancé utilise 0.91, réglé pour sa police à empattements). Nous calculons aussi ici l'espacement des lettres, à moins 3 % de la taille de police.
<!-- fs-richtext-ignore -->var fontSizeLastName = fontSize * 1.08;
var letterSpace = fontSize * -0.03;
Enfin, nous appliquons les styles à nos éléments. L'extrait ci-dessous est la boucle simple qui définit la taille de police. Dans le CodePen avancé, la même étape définit aussi l'espacement des lettres des prénoms, la taille plus petite des noms de famille et la hauteur de chaque bloc de lien, calculée à partir des deux tailles de police et de leurs hauteurs de ligne.
<!-- fs-richtext-ignore -->menuItems.forEach(function(item) {
item.style.fontSize = fontSize + 'px';
});
Et voilà ! Nous avons un menu dynamique qui adapte sa taille de police à la taille de l'écran. Vous réglez les multiplicateurs une fois pour votre élément de menu le plus long, et le menu remplit ensuite l'espace quelles que soient la largeur et la hauteur.
Le rappel
Mais nous ne nous arrêtons pas là. Nous appelons notre fonction chaque fois que la fenêtre est redimensionnée. C'est comme dire : « Eh, si l'espace change, on recommence tout ! »
<!-- fs-richtext-ignore -->window.onresize = adjustFontSize;
Nous appelons aussi notre fonction lorsque le document est prêt. C'est notre façon de dire : « Que la fête commence ! »
<!-- fs-richtext-ignore -->document.addEventListener('DOMContentLoaded', adjustFontSize);
Une alternative en CSS seul pour les cas simples
Si tous vos éléments partagent la même police, vous n'avez peut-être pas besoin de JavaScript du tout. La fonction CSS min() renvoie la plus petite des valeurs que vous lui donnez, ce qui correspond exactement à notre appel Math.min(). Quelque chose comme font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); vous donne le même comportement « la plus petite valeur entre la largeur et la hauteur » à chaque redimensionnement, en utilisant les multiplicateurs de notre exemple simple. Vous devrez tout de même ajuster les nombres pour votre propre police. Nous optons pour JavaScript lorsque nous devons dimensionner deux polices différemment, ajuster l'espacement des lettres ou baser le calcul sur le texte lui-même. La fonction min() est disponible dans tous les navigateurs depuis juillet 2020 (source : MDN Web Docs).
Si vous superposez aussi une vidéo au survol derrière un menu comme celui-ci, nous avons expliqué comment créer des vidéos d'arrière-plan alimentées par le CMS dans Webflow avec le Custom Element. Et si les styles en ligne définis par un script comme le nôtre ne semblent pas respecter vos classes, notre guide sur la spécificité CSS dans Webflow explique pourquoi.
FAQ
Comment faire en sorte qu'une taille de police s'adapte à la fois à la largeur et à la hauteur du viewport ?
Calculez une taille de police à partir de la largeur du viewport et une autre à partir de sa hauteur, puis utilisez la plus petite des deux. En JavaScript, c'est Math.min() ; en CSS, c'est min() avec les unités vw et vh. Utiliser la plus petite valeur garantit que le texte ne déborde jamais, dans aucune direction.
Puis-je faire de la taille de police dynamique en CSS sans JavaScript ?
Oui, pour les cas simples. Une règle telle que font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); reproduit notre exemple simple sans script. JavaScript reste utile lorsque vous devez dimensionner deux polices différemment, régler l'espacement des lettres ou baser le calcul sur le texte lui-même.
Pourquoi ne pas simplement utiliser la largeur du viewport (vw) pour la taille de police ?
Une taille de police basée uniquement sur la largeur continue de grandir sur les fenêtres courtes et larges, si bien que le texte peut déborder du viewport et forcer le défilement. Comparer la taille basée sur la largeur à une taille basée sur la hauteur et retenir la plus petite évite ce problème.
Où placer le script dans Webflow ?
Ajoutez-le en code personnalisé avant la balise de fermeture body, dans les paramètres de la page ou dans un embed, et assurez-vous que la classe ciblée (ici .menu_item) correspond à la classe de vos éléments. Le script s'exécute une fois lorsque le document est prêt, puis à chaque redimensionnement.
Pour conclure
Voilà, mes amis. Un guide pas à pas pour rendre votre texte Webflow aussi dynamique qu'un acrobate du Cirque du Soleil. Cela demande un peu de travail, mais au final nous obtenons un menu qui a fière allure et qui s'adapte à votre contenu et aux écrans de vos utilisateurs.
N'oubliez pas : la clé d'une excellente expérience utilisateur, c'est l'adaptabilité. Et avec ce menu dynamique, vous êtes sur la bonne voie pour créer un site aussi adaptable que possible.
À la prochaine, continuez à explorer, continuez à expérimenter et surtout, continuez à créer. L'univers de Webflow est votre terrain de jeu. Maintenant, allez créer quelque chose de génial !
Si cet article vous a plu, découvrez nos autres tutoriels.
