Nous avons lancé une nouvelle fonctionnalité appelée "Fit Text", qui vous permet de créer des titres en gras qui s'adaptent à n'importe quel conteneur. Cette fonctionnalité prend en charge plusieurs lignes, le formatage en ligne et des largeurs minimales et maximales, tout en maintenant des performances élevées. Dans ce post, j'explique comment nous avons réalisé cela.
Le défi : Pas de solution CSS native
J'ai commencé par explorer les bibliothèques existantes, mais elles avaient toutes un défaut : elles devaient mesurer le texte qui devait s'étirer avant de le rendre. C'est un obstacle pour nous, puisque les sites Framer sont générés statiquement et doivent se rendre parfaitement dans n'importe quel navigateur avant que JavaScript ne s'exécute. Ensuite, j'ai essayé font-size: 100vw, ce qui fonctionne très bien si le texte remplit l'écran. Cependant, cela devient compliqué si vous voulez que le texte remplisse un conteneur arbitraire. Pour ce faire, vous devez construire une expression CSS calc complexe qui représente la taille de tous les ancêtres exprimée en pourcentages du total vw. Bien que cela soit faisable (et quelque chose que Framer fait déjà pour optimiser la qualité des images), il serait difficile de créer un composant contenant du texte d'une taille vw, puisqu'il serait difficile de connaître la taille des ancêtres à l'intérieur du code de composant isolé.
La solution : SVG avec viewBox et foreignObject
J'ai découvert qu'un SVG avec un viewBox et prenant en charge HTML dans SVG via un élément foreignObject pouvait fournir un effet de mise à l'échelle. Cette astuce nécessite de connaître la boîte de délimitation exacte du texte et de l'engager dans le viewBox, puis de rendre le texte à l'intérieur de l'SVG dans un foreignObject. Le foreignObject signifie que les lecteurs d'écran et le SEO n'ont aucune problème à trouver le texte à l'intérieur. Le revers de la médaille est que le viewBox du SVG doit être mis à jour chaque fois que la taille du texte change, et il doit être maintenu en synchronisation ; sinon, le texte sera coupé ou mal centré. Cela élimine probablement cette solution pour la plupart des sites personnalisés. Il n'est tout simplement pas faisable de déterminer ce viewBox à chaque fois que du texte est modifié, ou que ses propriétés affectant sa taille changent.
L'automatisation : Framer à la rescousse
Heureusement pour nous, Framer peut automatiser ce processus, en supprimant le tracas de devoir mettre à jour manuellement un viewBox chaque fois que le texte change. Chaque fois que vous définissez le texte sur "Fit", Framer mesure le texte à sa font-size actuelle, obtient la boîte de délimitation, l'enregistre et rend un SVG autour de votre texte avec un viewBox. Chaque fois que vous modifiez le texte, Framer répète ce processus pour s'assurer que le viewBox reste relatif au texte. Framer peut même prendre en charge une expérience d'édition transparente en convertissant la taille du texte en pixels chaque fois que vous l'ouvrez dans l'éditeur de texte en effectuant quelques calculs simples basés sur sa largeur actuelle. Lorsque vous avez terminé l'édition, Framer remet le viewBox, et il est de nouveau en échelle sans aucun impact sur les performances sur le canevas.
Le résultat : Redimensionnement doux comme du beurre
Lorsque vous déployez votre site, le viewBox est déjà calculé, donc Framer peut générer le site statiquement, et le texte sera rendu à la taille exacte même avant le chargement de JavaScript. Cela entraîne aucune clignotement, redimensionnement ou fondu, et un redimensionnement doux comme du beurre.
Le futur : Requêtes de conteneur
À l'avenir, nous prévoyons de passer aux requêtes de conteneur une fois qu'elles seront entièrement prises en charge par les navigateurs que Framer prend en charge. Vous pouvez utiliser l'unité cqw de la même manière que vous pouvez utiliser une unité vw, mais cqw est relatif au conteneur. Cela fonctionnerait pour les composants, car cela élimine le besoin d'une déclaration CSS calc complexe.
Fit Text est un excellent exemple de la façon dont Framer peut abstraire le travail d'ingénierie qui serait difficile à mettre en œuvre au cas par cas et vous permet plutôt de vous concentrer sur la mise en livraison de sites fantastiques. Il est passionnant de voir ce que les gens vont construire avec cette nouvelle fonctionnalité.
