I added some swash capitals to my variable font and used them to create animated characters using JavaScript and CSS, which I published on my website. The problem is that while they display perfectly in Chrome, they’re clipped in Safari (including iOS). These glyphs have long flourishes that extend well beyond the em space, and they’re clipped right at the edge of it. I checked online, and it seems to be a known bug. I’m not sure if this is the right place to ask, but has anyone ever experienced a similar problem, and is there a solution by adjusting some parameters in Glyphs? For an idea (check both browsers): Jijoninja figurin
Did you read this: Vertical metrics | Glyphs
Great idea, thanks! I modified TypoAscender and TypoDescender by adding 1000 units to the former and removing them from the latter, and the same for hheaAscender and hhesDescender. So, without changing the font, I managed to gain more vertical space. Unfortunately, for the lateral space (the monsters have “arms” that extend), I had to change LSB and RSB because I couldn’t see any other solution. I tried vheaVertAscender and Descender, but I understand that it has a function for non-Latin fonts. Anyway, I saved a different version of the file and modified only the relevant glyphs to compose the monsters without touching either js or css. Thanks!
Try extending the winAscent, winDescent. Those are used for clipping.
I tried, but it didn’t work… Regarding the vertical extension, it was excellent advice to consider the vertical metrics parameters. I just had to vary those parameters without touching the font, but for the lateral extension beyond the em space, winascent/descent doesn’t work either, and Safari doesn’t process it. It only renders it when it first appears on the screen, and then as the variable font gradually leaves the em space during its excursion, Safari stops rendering it. On Chrome, it probably works because it renders the glyph regardless of the box it’s enclosed in; it analyzes the ink, not the box.
Can you make a test glyphs where the longest extension is the default and it becomes shorter with the variation? A glyph can certainly be wider than on em.
For the horizontal issue, I solved it by symmetrically widening the LSB and RSB values of the glyphs whose “arms” extend beyond the em box, and now it works properly in Safari, just like in Chrome.
I think I understand your test, but to actually do it correctly, reversing things so that the widest extension is the default and the animation retracts from there would still not eliminate the need to widen the em box containing the glyph. LSB/RSB already work reliably, so I’ll leave it as is, also because for some glyphs, what happens in the various masters isn’t exactly how the font should behave, so I’m fine with having a normal version and a version just for monsters. Thanks again for thinking about this problem with me, especially about the vertical metrics, without which I would have had to completely revise the parameters I inserted in the JavaScript that makes the monsters work. I’d say I had to go through all this “safari” to get Safari to work (and it’s about time Safari went on a proper safari to discover other animals like Chrome, which seems to have a more sensible approach…).
So the glyph width stays the same but the glyphs grow bigger? I see.
do you have a usable solution now?
Yes I have a usable version, thank you again for your advice about vertical metrics.