Top of Text cut off when lineHeight < fontSize

[dsherret]

Version: 0.25.1
OS: Mac 10.11.3
Platform: iOS only since lineHeight seems to only be supported for iOS
Screenshot:

Code:

// JSX
<Text style={styles.text}>
  Text that goes on multiple lines.
</Text>

// style
var styles = StyleSheet.create({
  text: {
    fontSize: 35,
    lineHeight: 35 * 0.75
  }
});

https://rnplay.org/apps/GPgsLg

Note: Setting overflow: "visible" or a large height doesn't fix this.

[rogchap]

Why is this an issue? Surely it's expected behaviour?
Just remove lineHeight altogether and it renders correctly.

[dsherret]

@rogchap the purpose of this issue is to use lineHeight so removing it doesn't make sense. The expected behaviour would be for the top of the text to not be cut off (see here). I used 0.75 to really show the effect, but in my actual scenario I am using 0.90.

[rogchap]

In your link on stackoverflow the UILabel is larger than the text and is vertically aligned in the middle.
RN Text is rendered very differently, so best way to solve this is to add a paddingTop to your styles:

instructions: {
    fontSize: 35,
    lineHeight: 35 * 0.75,
    paddingTop: 35 - (35 * 0.75), // <-- Add this
  },

https://rnplay.org/apps/5MiWQQ

[dsherret]

@rogchap you're right! I just applied a background colour and I can see that happening. Thanks!

[dsherret]

I closed this, but actually I'm going to re-open it. It still doesn't seem right that react-native doesn't handle this automatically. I'll let someone on the team close it.

Btw, a decent workaround is to create a base text component and then add the padding automatically when when lineHeight < fontSize.

[kirankalyan5]

Even I have the same issue, In my case even if the give the line height equal to my font size, I still see the text cut on the top.
Reason being is it's top aligned and I also I see some extra spacing at the bottom.

[diegorodriguesvieira]

@kirankalyan5 Do you have any fix?

[ilyadoroshin]

@kirankalyan5 @rogchap's solution worked for me like a charm

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[sjmueller]

This should be reopened? It doesn't seem like the padding hack is working anymore:

Using the style:

  title: {
    fontSize: 18,
    lineHeight: 18 * 0.4,
    paddingTop: 18 - (18 * 0.4)
  }

[Jpunt]

Yes, can we please reopen this issue? Special characters like Â, É (yes, capitals) are cut off as well, even when lineHeight is the same as fontSize (which will mean the workaround above won't work). When lineHeight is not set at all, there're no issues.

With {fontSize: 48, lineHeight: 48}:

With {fontSize: 48}:

As you can see, omitting lineHeight does not result in the same thing (which could be different in different fonts I guess), but adding it cuts of the first line.

[hramos]

Highly recommend opening a new issue and filling out the template. This issue has been closed for a while.

[skellock]

Some fonts are not rendered correctly due to a bug(?) in ios (since 7.0!).

If you are experiencing the following:

• only on iOS, not Android
• with some custom fonts and not the built-in ones
• the vertical center is slightly above where you'd expect

Here's how I fixed it. An excerpt from my upcoming autobiography: "Why Do I Even Code Anymore?".

• Grab font tools for xcode 9 from Apple. (note you will have to login to get that)
• Install.
• ftxdumperfuser -t hhea -A d CrappyFont.ttf
• Edit the new xml file and tweak the values. For my case, I changed lineGap to 0 and added 300 to ascender. You'll need to play around to find the right value for you.
• Fuse these new values back into the font ftxdumperfuser -t hhea -A f CrappyFont.ttf. (this overwrites!)
• Rebuild your app (since this is a "binary" change).
• Repeat until you get the right numbers.
• Weep gently.

There's a few blog articles around with more info if you care more about "why".

Make sure you use a separate version of the font for Android since it doesn't have this problem.

An alternative way to fix would be to change the NSParagraphStyle of the NSAttributedString which backs the rendering of <Text />. There are two properties headIndent and lineSpacing which control this. They're not reachable via React Native though (source: none, I'm guessing).

[Jpunt]

@skellock I've got a lot of respect for your rabbit hole expedition 🙌 but since this goes wrong with the system font as well, I think we can assume the issue is with the code in ReactNative instead.

I've opened a new issue for it: #17064

[skellock]

@Jpunt I hadn't noticed any issues with the system fonts on iOS, nor any problems with Android.

I'll have another look tho. You likely have a better eye than me. 😆

EDIT: Just read your issue. osnap! I've never it that bad before on Android!

[anceque]

@Jpunt How did you solve the issue with this exact setting lineHeight === fontSize? i have upgraded RN to 0.54 but i still see the special chars cut off at the top in Android :(

[Jpunt]

We ended up specifying manual values for a paddingTop, for each case of fontSize + lineHeight 😒

[anceque]

@Jpunt ah, i see. What a bummer. I will go with undefined lineHeight in that case.. :| not happy either

[Jpunt]

Yes, this is all very depressing..