Text descender characters cut-off after upgrade from 0.76.1 to 0.78 with lineHeight the same as fontSize

[a-klotz-p8]

Description

After upgrading to the latest RN (0.78) I noticed that text descenders are cut off on Android while on iOS the text looks normal.

iOS:

Android:

Steps to reproduce

1. install the code from https://github.com/a-klotz-p8/TextDescendersIssue/tree/main
2. run on android

alternatively just init a new latest RN project and add Text components with the same lineHeight and fontSize.

React Native Version

0.78.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.3.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 4.71 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 32.0.0
      - 33.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-35 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.3.5
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no crash

Reproducer

https://github.com/a-klotz-p8/TextDescendersIssue/tree/main

Screenshots and Videos

[sarthak-d11]

Hey @a-klotz-p8,
Thank you for bringing this issue to our attention. I have been able to reproduce the problem on Android (both new and old architecture). However, the issue does not appear to occur on iOS (both new and old architecture), where everything is functioning as expected.

[a-klotz-p8]

Yes, for me this issue only occurred on Android. Good to hear you where able to reproduce it.

[NickGerleman]

TLDR: Using a line-height the same as font-size will cause clipping. Previously this was at the top, and now it's centered.

This is because of changes related to how we distribute line-height, to act more like web. A similar change may be coming to iOS, that @cipolleschi has been looking at getting merged. #29507

Previously, React Native on Android would arbitrarily shift text up, when line-height did not provide enough space. So, we could cut off ascenders, depending on the font, or could get some really funky results when certain unicode or emojis was used.

Now, React Native, like web, will center text within the the line box, instead of shifting the text upward. Unfortunately, unlike web, React Native still enforces that glyphs overflowing the bounds of the Text container will be clipped. This may change in the future, since having a line-height smaller than allowable space can sometimes be useful, even if it is currently (and... previously) frought, and can lead to different kinds of clipping.

Here's an example of what this looks like on web, where we mark a paragraph with overflow: hidden. We see the same issue, because the line-height does not provide enough space for the glyph, but now, we "distribute" the clipping to both the top and bottom, instead of just the top.

[a-klotz-p8]

TLDR: Using a line-height the same as font-size will cause clipping. Previously this was at the top, and now it's centered.

This is because of changes related to how we distribute line-height, to act more like web. A similar change may be coming to iOS, that @cipolleschi has been looking at getting merged. #29507

Previously, React Native on Android would arbitrarily shift text up, when line-height did not provide enough space. So, we could cut off ascenders, depending on the font, or could get some really funky results when certain unicode or emojis was used.

Now, React Native, like web, will center text within the the line box, instead of shifting the text upward. Unfortunately, unlike web, React Native still enforces that glyphs overflowing the bounds of the Text container will be clipped. This may change in the future, since having a line-height smaller than allowable space can sometimes be useful, even if it is currently (and... previously) frought, and can lead to different kinds of clipping.

Here's an example of what this looks like on web, where we mark a paragraph with overflow: hidden. We see the same issue, because the line-height does not provide enough space for the glyph, but now, we "distribute" the clipping to both the top and bottom, instead of just the top.

Thanks for the explanation. I guess in the meantime I am going to use paddingVertical with negative marginVertical until react-native Text allows overflowing glyphs.

[a-klotz-p8]

@NickGerleman
Using the paddingVertical with negative marginVertical fixed the issue but with this having alignItems: 'baseline' does not work anymore to have text of different sizes on the same baseline see:

snack reproducer:
https://snack.expo.dev/@alex_p8/jealous-red-donut

Is there a better way to fix this?

[ddx533534]

I tried this code example, but this issue didn't occur on Android device~

[a-klotz-p8]

I tried this code example, but this issue didn't occur on Android device~

The original Issue with the text being cut off? On what device did you run it and was it in a expo snack or from the Github replication repo?