Tuesday 28 June 2022

Text gets cut off when using specific character with font

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?



from Text gets cut off when using specific character with font

No comments:

Post a Comment