[bug] Noun Verbed can’t fit overlong text

[lucaswerkmeister]

Describe the bug The Noun Verbed generator can cut off the text at the sides if it’s too long.

How it happened

1. go to https://imagenerator.net/noun-verbed
2. pick a 16:9 image, e.g. this black canvas
3. enter the text “productivity achieved”

Expected behavior The text fits on the image. If it’s hard to pick the font size automatically, a slider for it would be nice (to complement the existing text position slider).

Screenshots

Your device information

• PC
• Firefox

[lucaswerkmeister]

Now I’m not seeing any text at all :(

https://github.com/olivvybee/imagenerator/assets/2346599/6a970a6f-bf87-4d88-8bee-4a7c227799ad

Firefox reports three errors in the console, not sure if they’re related:

downloadable font: maxp: Bad maxZones: 0 (font-family: "Atkinson Hyperlegible" style:normal weight:400 stretch:100 src index:1) source: https://imagenerator.net/fonts/Atkinson-HyperLegible-Regular.woff2
downloadable font: kern: Kerning pairs are not sorted (font-family: "Optimus Princeps" style:normal weight:400 stretch:100 src index:1) source: https://imagenerator.net/fonts/OptimusPrincepsSemiBold.woff2
downloadable font: Table discarded (font-family: "Optimus Princeps" style:normal weight:400 stretch:100 src index:1) source: https://imagenerator.net/fonts/OptimusPrincepsSemiBold.woff2 

Chrome also doesn’t show any text and puts different errors in the console:

[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://imagenerator.net/fonts/fredoka-one-v12-latin-regular.woff2
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://imagenerator.net/fonts/Atkinson-HyperLegible-Regular.woff2
[Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://imagenerator.net/fonts/OptimusPrincepsSemiBold.woff2

Edit: GNOME Web / Epiphany (which uses WebKit, so it’s the best approximation of Safari I have access to) also shows blank text and has no errors in the console at all AFAICT.

[olivvybee]

Hmm it seems like the browsers are trying to fall back to another font because the actual font hasn't loaded in time, but obviously there isn't really a fallback that makes sense so they're just rendering nothing :/ there might be something I can do to force it to wait for the fonts to load

I think this might be a total coincidence that it happened now tbh, there's nothing in the change I made that affects how the fonts are actually loaded 😅

[lucaswerkmeister]

Hm, you’re right, now it’s working for me again. (But I could swear I had tried a reload already earlier…)

[olivvybee]

I played around in chrome to reproduce the behaviour and I think maybe you happened to load the page while it was doing another deploy so the fonts didn't load that one time, because even when I saw the Slow network is detected error, it had still loaded the font anyway by the time I typed into the generator

[lucaswerkmeister]

Could be, yeah.

Anyway, if it’s working I’m happy for this to be closed again. And thanks for the speedy fix :)