-
textFit
A jQuery-free component that quickly fits single and multi-line text to the width (and optionally height) of its container.
-
vue-textfit-experiment
Exploring a <TextFit> component for Vue3, based on https://github.com/STRML/textFit
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
So there's a great Javascript library called textfit https://github.com/STRML/textFit that will figure out the correct font size to fit a piece of text into a div. I'd love to wrap that as a Vue component, and I have had only partial results. One problem is that since textfit modifies the DOM objects directly it breaks Vue's reactivity (e.g. changing the text in question won't update), but I'm fairly sure I can plow through that and get that part to work eventually.
The bigger problem is that if I place some components are inside v-show (because I'm not ready to bring them into view, for example), then they're in the DOM but hidden, so the geometry isn't established enough to do the text fitting. That part I understand. What I don't know is how to be notified at "the right time", e.g. when a containing element goes from v-show false -> true, which would be an OK time to recompute the textfit. I put together my work in progress at https://github.com/pcherna/vue-textfit-experiment and described my experiments and results in the README.md, would be curious if anyone had any inspiration.