ScaleDownTextField for html template

General
1

Hi good morning , i need to know if is some javascript for dynamically fit text to container like in animate AS was the funcion ScaleDownTextField ?

thanks

2

I don’t have a ready made function for vanilla JS (I use Vue myself) but in general you take the size of the text and the size of the container and then use a css scale transform.

Would look something like this

function resize() {
    const textBars = document.getElementById('textBars')
    const bg = document.getElementById('bg')

    const maxLen = bg.clientWidth
    const len = textBars.clientWidth

    if (len > maxLen) {
        const scale = maxLen / len

        textBars.style.transform = `scale(${scale}, 1)`
    } else {
        textBars.style.transform = `scale(1, 1)`
    }
}
1 Like
3

For templates with dynamic “scale-to-fit” text needs I have used a small textFit.js -library. Very easy to set min / max sizes etc. See a live demo and the page source for an example:

https://smartpx.fi/demos/textFit/

1 Like
4

ok thanks , i use vuejs as well, is any library that can i use for that or how you do it ?

thanks

5

No library involved here. I just add a function similar to that and call it every time the text changes using a watcher.

2 Likes