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.