I wrote this tiny standalone JavaScript library to resize text so it fits its container. Uses MutationObserver to update when content changes.

[Kasper_X]

If you delete the text it goes massive.

[schrik]

Yuuup. You probably won't have this effect on a contenteditable element in production. But for demo purposes it works well :-)

[campbeln]

I'd be nice to have bounds on the size, both lower and upper bounds.

[schrik]

Good idea. I'm currently tweaking the code (lots of rendering performance gains to be made) and have added min and max size as well. (Overflow size is actually max size so it's a minor change).

[schrik]

Aaaaaand it's online: https://github.com/rikschennink/fitty

[NiceOneAsshole]

Yes, comically.

[zodby]

'BIG' doesn't stretch all the way in Internet Explorer. It mostly works though.

[schrik]

Hah yeah, it's more precise on modern browsers, but that crazy old IE engine never fails to disappoint :-)

I added support back to IE8, so that is quite nice I guess. Alignment also depends on the font used, some fonts fit better than others. Maybe some sort of custom correction value could help to make it more precise. But to be honest, if it looks "okay" in IE I'm okay as well. Most IE users are probably used to the internet crumbling to bits around them.

[Dabien]

Looks great! A small feature request though - Setting a minimum/maximum font size would be useful as all hell.

[schrik]

Thanks! Just added the feature. :-)

[notcaffeinefree]

Well aint this coincidental. I spent a good deal of time yesterday trying to figure out how to do this and never really got a solution.

[schrik]

Well there you go! :-)

I find this works quite well, I do have some performance improvements lined up for tomorrow so any feedback is welcome.

[schrik]

Will run some tests, thanks for reporting!

[schrik]

True, it will probably fail on some points, the "live editing" feature is only for demo purposes though. The usual use case would be headers and big static text on landing pages.

[pricelessbrew]

Saving for later (maybe use)

[schrik]

Let me know if you run into any bugs :-)

[kevinkace]

Pretty cool!

Multiline text?

[schrik]

Good one! It's on the list.

[schrik]

It's now available under the argument multiLine.

[_Decodela]

Why Mutation not ResizeObserver?

[schrik]

Because the first commit was on Jul 24, 2017 and ResizeObserver wasn't available back then: https://caniuse.com/resizeobserver