Diacritic marks on certain glyph letters incorrectly placed

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

https://docs.mapbox.com/mapbox-gl-js/

Other

11.14k stars 2.22k forks source link

Diacritic marks on certain glyph letters incorrectly placed #7195

Closed ghost closed 2 years ago

ghost commented 6 years ago

mapbox-gl-js version: 0.48.0

browser: Electron 2.0.3/Chromium

Expected Behavior

It should appear like below:

Sít' Eetí G̱eeyí <--- notice the i's
(Rendu Inlet)

Actual Behavior

It appears like this:

This place is a native place in SE Alaska written out in one of the native languages of that area. Most but not all diacritic marks are coming through fine but the i's stand out.

ikphilip commented 6 years ago

I've also been able to reproduce this problem. Perhaps my demo might be illuminating.

I'm mostly interested in the Combining Macon Below (U+0331) and lower case g. My demo also has an example where a Combining Acute symbol (U+0301) is displayed incorrectly with a lower case i.

It would be useful for me to display the macron below the g without intercepting the descender. I am unsure why this occurs but it is isolated to the canvas rendering of the text.

https://jsfiddle.net/9L7opy1c/2/

1ec5 commented 5 years ago

The Mapbox Fonts API conflates glyphs with codepoints, so each codepoint can have only one glyph, one advance, and one baseline. In https://github.com/mapbox/mapbox-gl-js/issues/7195#issue-353850571, this is a problem because the “i” glyph is narrower than most other base letters, while in https://github.com/mapbox/mapbox-gl-js/issues/7195#issuecomment-424404044, the standard combining glyph can’t accommodate any character with descenders. #4009 would implement basic kerning support. #191 might also be relevant, since combining characters are more likely to come from fallback fonts in the font stack.

/cc @ChrisLoer