The Problem: the font-loaded fires, when the font is loaded and visible, but still not full calculated?
The mission is to create an hr like element, that spreads a given pattern over a given width of an element. I named it Garnish
The easiest is eg. “+”, put as many “+” into the element (and stretch to fit)
There are more complex patterns like “(—+—)”, but this we do not need here.
All this with decorative fonts.
The logic – at least for on character – is simple. Get the width of one … the rest is clear.
This all makes more sense with decorative Fonts that have special nice looking glyphs.
So I have to wait until the font is loaded and after that I call (again) Garnish.calculate_into(element), as soon I get noticed, that the font was loaded. For this I use the FontFace interface.
All this works – most of the time for most of fonts. But not always.
The point, the problem is, that I get wrong dimensions for the glyph when I call Garnish.calculate_into(element), when call directly after “loaded“
If I defer (setTimeout) this call again for up to 3 seconds, all is nice again.
Therefore I think, that loaded is not ready to use.
After I get the loaded info, the font is correct displayed. But the width of the glyph is still wrong!
3secs (or what ever time >2.5 secs) later, I get the correct width.
I try to explain step by step
We assume the pattern “+” will get “∰” after the Font is loaded.
After reloading the page I see “++++++++++” and calc_into says pattern is 5px wide (as expected)
After font loaded I see “∰∰∰∰∰∰∰∰∰∰” and calc_into says pattern is 5px wide (surprise)
If I fire calc_into 3 seconds later I see “∰∰∰∰∰∰” and calc_into says pattern is 12px wide (as expected)
This does – as expected – not happen, if Cache is not disabled.
This belongs to all browsers I can test (ie. no idea about safari).
So I think there is a difference between loaded and “ready”
Is is possible to get this ready state?
I am not searching for workarounds.