pierredarrieutort / fitext

Resizes text elements proportionally to fit any element

Hi 👋, I'm Pierre

A frontend interactive developer from Bordeaux, France

• 🔭 I’m currently working on a lot of tools at HelloAsso

• 🌱 I’m currently learning ThreeJS, GLSL

• 👨‍💻 A lot of my projects are available in this GitHub & coming soon on my new portfolio !

• 💬 Ask me about JS, GSAP, BarbaJS, full-stack stuffs

• 📫 How to reach me : [email protected] or by LinkedIn

fitext's Issues

fitext hangs firefox in android

Accessing the demo from firefox android
https://pierredarrieutort.github.io/fitext/

The offending line is
update_font_size = (child, reversed) => child.style.fontSize = ${parseFloat(getComputedStyle(child).fontSize) + (reversed ? -stagger : stagger)}px

It happens on the reversed -stagger case. For some reason using a too low stagger,
say 1 or 2 the result actually increases the font size. This results in infinite loop increasing
the font size. I tried a piece of code of mine and using a stagger 10 did actually decreased the font.
Fixing the issue.

But still I think there is something fitext code is not considering. Or firefox maybe.
I traced style.fontSize and getComputedStyle(...).fontSize and they tended to have a
considerable gap of px. This gap grows with the ever increasing font-size too.

Im not sure about using a bigger stagger. My guess is that fitext loses font-size granularity.

Infinite loop when trying reducing the height of the fitter container to the minimum

Expected behaviour

The font size should reduce to the very least (even if not even visible I guess?) when extremely reducing the height of a container.

Actual behaviour

The website stops responding. From what I could notice, this is probably due to an infinite loop trying to update the children font sizes while it's still overflowing...

How to reproduce

Go to the project's demo and try reducing the height to the minimum (it get stuck around a height of 20% (for a width of 60%) if your doing it slowly, but the values don't matter much, it's rather the action of reducing the height to its minimum).

Specifications (just in case)

• Version: fitext v1.0.5
• Browser: Google Chrome 81.0.4044.138
• OS: macOS 10.12.6

TypeScript type declaration file

If you want I can write a TypeScript type declaration file for this package so that TS developers can utilise the type-checking feature of the language as they use this package. Let me know if you are interested.

Double while causing performance issues

Double while in the fitext core needs to be replaced or be more strict to prevent infinite loops

Example doesn't work

File 'fitext.min.js' not found. There is also no .min. file provided. In 'dist' -folder I just can find .cjs. .esm. and .umd. files. No one of them works. :-(