Line height is distributed unevenly when lineHeight <= fontSize

@necolas

Description

When lineHeight is less than the fontSize, Text shrinks the line's bounding box only by removing space from above the text, rather than distributing the space evenly above and below, as is done with extra line height. Actually, the issue manifests when lineHeight is less than fontSize plus some small amount (perhaps the font bounding box height?)—e.g. <= 45px for 40px Helvetica.

This leads to clipped glyphs and produces differences in text rendering between react-native-web and react-native (necolas/react-native-web#1687). After some discussion with @necolas, my inclination is that RNW's behavior is the more reasonable one, so I thought I'd open an issue here.

This issue reproduces across a variety of fonts.

Unfortunately,I worry that fixing this issue will create subtle and surprising source compatibility issues for existing clients.

React Native version:

System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 337.02 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Run example app here: https://snack.expo.io/W51F2OAqD

Expected Results

The extra line spacing should be removed evenly from both above and below the type.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/W51F2OAqD

A workaround for readers who stumble on this issue: if you'd like to use smaller line heights without glyph clipping, you'll need to add top padding to the Text element, which you must then compensate for by shifting the element up (e.g. via top plus relative positioning, or a negative marginTop).

Does adding this prop help textAlignVertical='center'?

@ravirajn22

@ravirajn22: Nope, that doesn't change the output, neither on Android nor on iOS.

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Nope, the issue has not been fixed; it still requires attention. I don't seem to have permission to add it to the backlog.

@andymatuschak

I can confirm that this is still an issue

Thanks for the tip with the workaround @andymatuschak

Yep, still an issue

Still an issue

Agreed, still an issue, bot.

On Windows, XAML has LineStackingStrategy and TextLineBounds for fine-tuning the text positioning. On web, there's a proposal for "leading-trim".

Do iOS or Android have anything similar that could be used or exposed?

Still an issue

Reopening until iOS fix for tracking purposes

@mellyeliu

@mellyeliu I have created a PR with a fix for iOS. Please take a moment to review It. Your feedback would be greatly appreciated!

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Not stale. PR #46884 is open

Can you remove https://github.com/facebook/react-native/labels/Resolution%3A%20Fixed label as the fix for iOS is not merged yet?

Very surprised that such a fundamental issue for such a widely used framework is still unresolved for so long.
Am new to developing with React Native and ran into this issue from the very beginning.

The solution suggested by #29507 (comment) isn't suitable for my use case as I deal with dynamic content throughout the app with many different font sizes and some are multiline.

Mainly becomes an issue when the text is aligned with icons or there are line separators between lines of text where you can notice the uneven spacing.

Only solution I found was to increase the line height to at least 1.5 times the font size, but it doesn't always work for all cases (some just still look unbalanced regardless).
Or to reduce the icon size to give the illusion that it's centered.

Really wish that more attention would be paid to this issue.

this issue still exist

the android fix was merged but text is still cut off and the old padding hack doesnt work in new arch so bump

@fabOnReact

@fabOnReact I saw in different threads that you primarily work on Text components, do u have any ideas on how to solve text cut offs for android (except of adjusting lh)? for ios its still possible to do padding + negative margin while for android it's impossible in new arch

jic example of cut off in the screenshot (fz = lh, first text is Noto Sans JP, second text is MPlus 1c):

Navigation Menu

Repository navigation

Line height is distributed unevenly when lineHeight <= fontSize #29507

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

18 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Line height is distributed unevenly when lineHeight <= fontSize #29507

Description

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

Activity

andymatuschak commented on Jul 28, 2020

ravirajn22 commented on Aug 3, 2020

andymatuschak commented on Aug 3, 2020

stale commented on Dec 26, 2020

andymatuschak commented on Dec 28, 2020

Dinkelborg commented on Apr 21, 2021

SpookyUmi commented on Jun 9, 2021

navaneeth7067 commented on Jul 8, 2021

kbrandwijk commented on Aug 6, 2021

aschultz commented on Nov 30, 2021

v0vchansky commented on Oct 9, 2022

18 remaining items

mellyeliu commented on Oct 3, 2024

ArekChr commented on Oct 8, 2024

react-native-bot commented on Apr 7, 2025

DimitarNestorov commented on Apr 7, 2025

DimitarNestorov commented on Jun 18, 2025

harmony-netizen commented on Jun 24, 2025

Nader-CS commented on Jun 25, 2025

leineveber commented on Jan 15, 2026

leineveber commented on Jan 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions