Web font has problems with zero width char in iOS and macOS

Glyphs
1

Sorry if this is off-topic but maybe you are aware of this behavior.
I’ve created a custom web font. There are some special chars that have zero width (these will be colorized light gray) so that the next char will overlay. The effect should be as if a standard black outline char is on a gray background.
Everything is looking good on win machines (tested Edge, Firefox and Chrome) but on iOS devices and macOS these chars disappeared or are discarded.
Chrome on Win:

ChromeWin001

Safari on macOS Catalina:
01

Is there any way to influence this behavior via Glyphs or is this a system “problem”?

And is it possible to influence the horizontal and vertical metrics so that the gray fields do not overlap? Now I need a “line-height” of 0.98em so that there is no gap between the lines.

2

I don’t know about the disappearing letters. Could you send me the .glyphs file, the webfont and the .html file?

And did you read this: https://glyphsapp.com/tutorials/vertical-metrics

3

I will read it :wink:

4

I had a look at it. There seems to be something wrong with your css. If I remove the “defs.css” it works.

I simplified the html a bit. Try this file. If you add the defs.css (it is commented out) the z will disappear.
index.html.zip (901 Bytes)

Then go hunting what the problem is. I would disable the top part of the file, check if still breaks, disable the bottom part. And so on.

1 Like
5

Thank you very much for checking!
I think it’s how CSS is implemented in different browsers/OS although I followed the standard but Safari is somewhat special.
I got now everything working on Win and Mac with all major browsers. The point is that I have to put the font definition class inside a <div> container – not inside anything else:

<div class="dia2">
  [ABCDEFGH]<br>
  8-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>(<br />
  7<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-‘<br />
  6-<span class="gf">+</span>k<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">v</span>l&<br />
  5<span class="gf">z</span>P-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-%<br />
  4-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>$<br />
  3<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-#<br />
  2-<span class="gf">+</span>N<span class="gf">+</span>-<span class="gf">z</span>PK<span class="gf">z</span>p“<br />
  1<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-<span class="gf">+</span>-!<br />
  {abcdefgh}<br /><span class="capdia">Weiß zieht</span>
</div>

Thank you for your help!
I will now read the topic on vertical metrics …