Text gets cut off when using specific character with font

Viewed 145

I'm working on an app where I have to use the font provided in this tff file, and using the unicode character 2019 with this font breaks the text in the app. I'm not sure if this is a font problem or an Android problem, but our iOS team isn't having the same issue and I don't know enough about fonts to dig into the .tff file myself so here I am.

  • If the first screen shown after app launch contains the character, then the baseline of some chars get shifted up and the top of them get cutoff completely.
  • This then sets a precedent for the app where every screen seen after will have its text cut off, even if it doesn't contain the character.
  • However, if the first screen shown after app launch doesn't contain that character, then any screens shown after will look fine - even if they have the character.

I replicated the issue in a barebones sample app that does nothing special other than apply the font and set some text that contains the character. The issue happens for both XML based views as well as with Jetpack Compose, though the "precedent" stated above is unique to each implementation (i.e. if a Compose screen with the text is seen first it will break all following Compose screens but not XML ones, and vice-versa).

Here are some examples of what the text looks like when using U-2019 (squiggly apostrophe) vs using U-0027 (normal apostrophe) in "I've":

U-2019 Compose (cutoff) U-2019 XML (cutoff)
enter image description here enter image description here
U-0027 Compose (fine) U-0027 XML (fine)
enter image description here enter image description here

So is something wrong with that specific character in the .tff file? Is there a bug in the Android framework that can't handle that character with how it's drawn? Something else?

2 Answers

I remember this happening at work with Macron or other special characters for Maori words. We ended up just using a different font for those parts if I recall.

I downloaded FontForge to inspect the glyph further and found that the glyph for U+2019 was a composite glyph that referenced the comma instead of drawing its own glyph.

In the table of glyphs I was able to right-click on U+2019 and select "Unlink Reference" which forced the character to draw its own glyph.

Dropdown menu for right clicking a glyph

After saving and exporting the font and importing it into my Android project the clipping issue is no longer present! I'm still not sure if there's a bug in the Android framework for handling composite glyphs or if the composite glyph itself had some bad data, but either way making it draw the glyph itself definitely fixed my issue!

Related