LineHeight is working weird on specific fonts (Android Only) #29232

toy0605 · 2020-06-27T07:31:10Z

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Multiline texts don't have same line height on specific fonts. (NotoSansCJK= Source Hans Sans, NotoSerifCJK=Source Hans Serif)

It happens on first line.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 7.08 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Set lineHeight properly. (not too small, large)
and set fontFamily to custom font which has problem. (NotoSansCJK, NotoSerifCJK)

Expected Results

Every lines have same line height.

like this:

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

Android Native(No React Native) is fine. This font is NotoSansKR-Regular :

iOS is fine:

Text Style:

{
    padding: 10,
    fontSize: 12,
    lineHeight: 28,
}

The text was updated successfully, but these errors were encountered:

toy0605 · 2020-06-27T07:32:16Z

source code here.
https://github.com/toy0605/FontTestApp

toy0605 · 2020-06-27T07:36:47Z

and this is real device(not emulator) screenshot.

it's galaxy s9+ (android 10)

fabOnReact · 2020-07-06T07:41:13Z

you saying that this bug reproduces only on galaxy s9+ (android 10) ?
Does not reproduce on emulator api 28

toy0605 · 2020-07-08T02:04:51Z

you saying that this bug reproduces only on galaxy s9+ (android 10) ?
Does not reproduce on emulator api 28

No. It doesn't reproduce only on Galaxy S9+. It happens on emulator, too.
Could you tell me which you tested on emulator?

I tested on Nexus 5 API 28, Nexus 5 API 29 Emulator.
This is my emulator version.

and I changed System language(English(United States) to 한국어(대한민국))

ASCII128514 · 2020-08-10T04:08:50Z

Same issue here, even it was fixed according to #7546 (comment) , I am using react-native 0.63.2, line height of the first line of the ttf font I am using differs from all the other liens. And it is only on Android. I tested on Pixel 2 API R.

k1195453766 · 2020-09-04T01:28:38Z

The same question，Have you solved it

safaiyeh · 2020-09-06T05:19:34Z

I believe @fabriziobertoglio1987 is working on a PR similar to this? Can you confirm and link the PR/issues?

stale · 2020-12-25T17:16:41Z

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.

boerdjamin · 2021-03-26T12:21:54Z

I am also running into this issue. Any solutions?

roni-castro · 2021-06-01T19:32:39Z

Reproducible example with the font HelveticaNowDisplay https://snack.expo.io/@ronicesarrc/custom-font-example

emin93 · 2021-07-30T09:31:30Z

Unfortunately the issue still persists for me in 0.65.1. But I found a super strange workaround for this issue and would be curious if that also works for you. Maybe it also helps finding out what the underlying issue is.

Starting Point

<Text>aaa...</Text>

fontSize: 16,
lineHeight: 24

Strange workaround

Add an empty nested Text and give it lineHeight +1 of the parent.

<Text>aaa...<Text style={{ lineHeight: 24 + 1 }}  /></Text>

fontSize: 16,
lineHeight: 24

Summary

I created a component that does the job:

import { Platform, Text as RNText } from 'react-native';

export const Text = ({ style, children, ...rest }) => (
    <RNText style={style} {...rest}>
        {children}
        {Platform.OS === 'android' && <RNText style={{ lineHeight: style.lineHeight + 0.001 }} />}
    </RNText>
);

markdalgleish · 2021-09-24T01:11:48Z

@emin93 Thanks for the workaround!

I noticed that lineHeight + 1 seems to add a noticeable amount of space to the text node (I'm using react-native-capsize to trim space above capital letters and below the baseline).

It looks like literally any non-zero difference to the parent line height also fixes it, e.g.lineHeight + 0.001 also works for me and doesn't introduce unwanted space.

emin93 · 2021-09-29T06:18:02Z

@markdalgleish Ah that's good to know, thanks!

markdalgleish · 2021-09-29T23:15:41Z

I also noticed that this bug can affect text nodes on Android when when numberOfLines causes text to truncate, even when it's just a single line of text. Luckily the workaround posted earlier fixes this issue too, but decided to share for completeness.

stale · 2022-01-09T03:46:18Z

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.

SleeplessByte · 2022-01-10T13:48:17Z

Not stale.

manoj-clix · 2022-01-12T12:19:59Z

Unfortunately the issue still persists for me in 0.65.1. But I found a super strange workaround for this issue and would be curious if that also works for you. Maybe it also helps finding out what the underlying issue is.

Starting Point
<Text>aaa...</Text>

fontSize: 16,
lineHeight: 24
Strange workaround

Add an empty nested Text and give it lineHeight +1 of the parent.
<Text>aaa...<Text style={{ lineHeight: 24 + 1 }}  /></Text>

fontSize: 16,
lineHeight: 24
Summary

I created a component that does the job:
import { Platform, Text as RNText } from 'react-native';

export const Text = ({ style, children, ...rest }) => (
    <RNText style={style} {...rest}>
        {children}
        {Platform.OS === 'android' && <RNText style={{ lineHeight: style.lineHeight + 0.001 }} />}
    </RNText>
);

Thanks @emin93 , it's working with your suggested changes.

zecergin · 2022-02-14T12:04:39Z

The issue still persists for me in 0.64.3. However, the strange workaround from @emin93 works.

emin93 · 2022-02-18T15:35:22Z

Reporting back after a while - this issue is still present. While the provided workaround might solve the issue with the first two lines, it unfortunately is not a "one size fits all" solution. When applied on single line texts it causes the vertical alignment to be off. includeFontPadding and textAlignVertical don't help in that case either.

darrylyoung · 2022-06-14T12:36:24Z

I'm also seeing this issue when trying to correctly align the placeholder text inside the Android-specific SearchBar component from React Native Elements. Unfortunately, the workaround mentioned doesn't work for me, and the placeholder remains too high, so I've had to resort to the crude paddingTop: 3 to give it the nudge it needs. This is with the Poppins font, specifically Poppins_400Regular.

psaikali · 2022-08-26T06:41:29Z

Can confirm, this is still a bug (using GrotaRounded custom font for instance) on Android.
But @emin93 weird workaround works indeed!

CapsAdmin · 2022-09-14T15:37:29Z

I believe this is caused by

https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java#L25

There is some complex logic that tries to center the font in an appropriate way if the line size is below a certain amount. It can happen if the font has unusual metadata, like the capheight being very tall.

I don't think this happens on IOS or web, at least I don't see it happening in practice nor can I find any code that does it.

Adding magic offsets to line height will only make it work for that specific font, at that specific size and line height.

felipecsl · 2023-03-31T23:51:56Z

I believe this is caused by

https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java#L25

There is some complex logic that tries to center the font in an appropriate way if the line size is below a certain amount. It can happen if the font has unusual metadata, like the capheight being very tall.

I don't think this happens on IOS or web, at least I don't see it happening in practice nor can I find any code that does it.

Adding magic offsets to line height will only make it work for that specific font, at that specific size and line height.

This file has moved to https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

CustomLineHeightSpan claims to exist because of #7546 which seems to have been already fixed, so this workaround might not be needed anymore

KevinvdBurg · 2023-06-13T09:51:33Z

This issue still persists. I tried the workaround suggested by @emin93, but it didn't work. To fix it, I added a marginTop specifically for Android. However, it feels somewhat dirty.

    const style = getTextStyle(type);
    const color = getTextColor();
    const lineHeightFix = {marginTop: IS_ANDROID ? 6 : 0}; 

    return (
        <Text style={[style, {color}, propStyle, lineHeightFix]} {...otherProps}>
            {children}
        </Text>
    );

jerryphm · 2023-06-22T10:26:56Z

I'm facing this problem too (version: react-native 0.70.9)

professorkolik · 2023-06-22T10:35:27Z

For most of the fonts you should apply ascender/descender metrics to make it render correctly at first and last lines.
this tool might help you understand https://vertical-metrics.netlify.app/

Though there are broken fonts (made by font designers) where you should add workarounds 😄

based on ascender/descender data you can dynamically calculate your padding top

Though maybe someone has better approach, for me nothing worked except doing all calculations on my own

shixiaoquan · 2023-08-14T08:31:53Z

Unfortunately the issue still persists for me in 0.65.1. But I found a super strange workaround for this issue and would be curious if that also works for you. Maybe it also helps finding out what the underlying issue is.

Starting Point
<Text>aaa...</Text>

fontSize: 16,
lineHeight: 24
Strange workaround

Add an empty nested Text and give it lineHeight +1 of the parent.
<Text>aaa...<Text style={{ lineHeight: 24 + 1 }}  /></Text>

fontSize: 16,
lineHeight: 24
Summary

I created a component that does the job:
import { Platform, Text as RNText } from 'react-native';

export const Text = ({ style, children, ...rest }) => (
    <RNText style={style} {...rest}>
        {children}
        {Platform.OS === 'android' && <RNText style={{ lineHeight: style.lineHeight + 0.001 }} />}
    </RNText>
);

This solution is awesome, but not work for me.
It worked when I place {children} after {Platform.OS ........} like below

import {Platform, StyleSheet, Text as RNText} from 'react-native';

const Text = ({style, children, ...rest}) => (
    <RNText style={style} {...rest}>
        {Platform.OS === 'android' && (
            <RNText
                style={
                    StyleSheet.flatten(style)?.lineHeight
                        ? {lineHeight: StyleSheet.flatten(style).lineHeight + 0.001}
                        : {}
                }
            />
        )}
        {children}
    </RNText>
);

sashagreen · 2023-08-30T20:54:12Z

For most of the fonts you should apply ascender/descender metrics to make it render correctly at first and last lines. this tool might help you understand https://vertical-metrics.netlify.app/

Though there are broken fonts (made by font designers) where you should add workarounds 😄

based on ascender/descender data you can dynamically calculate your padding top

Though maybe someone has better approach, for me nothing worked except doing all calculations on my own

Thank you so much! I ran into this issue with custom font after switching to target SDK 33 and this app was immensely useful in showing what to fix in the font to make it behave 'normally'. I ended up rebuilding the font with proper location of glyphs.

carrie503 · 2023-09-15T10:58:45Z

The solution from @emin93 is nice! But I found that solution can't fix the paragragh problem. The lines still stick together after a newline. If you are facing same issue like me, I have another solution that is based on @emin93's solution.

export const Text = ({ style, children, ...rest }) => (
    <RNText style={style} {...rest}>
        {children}
        {Platform.OS === 'android' && <RNText style={{ lineHeight: style.lineHeight + 0.001 }} />}
    </RNText>
);

const ParagraphText = ({paragraph}): JSX.Element => {
  const textStrings = useMemo(() => paragraph?.split(/\r?\n/), [paragraph]);

  const textStringsComponents = useMemo(
    () =>
      textStrings?.map((text, index) => (
        <>
          <Text>
            {text}
          </Text>
          {!!textStrings && index !== textStrings.length - 1 && (
            <Text>
              {'\n'}
            </Text>
          )}
        </>
      )),
    [color, content, textStrings, variant, weight]
  );

    const transformedChildren = useMemo(
    () => (Platform.OS === 'android' ? textStringsComponents : paragraph),
    [paragraph, textStringsComponents]
  );
  return (
    <Text>
      {transformedChildren}
    </Text>
  );

fabOnReact · 2024-01-16T10:47:20Z

Do you still experience this issue? If yes, I will publish the fix in the react-native-improved package https://github.com/fabriziobertoglio1987/react-native-improved. Thanks a lot

XantreDev · 2024-01-25T15:38:44Z

This is just crazy that this issue still a problem. @fabOnReact Can it be fixed without patches?)

XantreDev · 2024-01-25T15:58:03Z

My workaround. Is not breaking ref, works as drop in replacement

pnpm i react-fast-hoc

import React from 'react';
import { transformProps } from 'react-fast-hoc';
import * as RN from 'react-native';

// Fix of android lineHeight problems https://github.com/facebook/react-native/issues/29232#issuecomment-1721080348
if (RN.Platform.OS === 'android') {
  // Clone text since we modify it
  const OriginalText = Object.assign({}, RN.Text);
  Object.assign(
    RN.Text,
    transformProps(RN.Text, (props) => {
      const style = RN.StyleSheet.flatten(props.style);
      if (!style?.lineHeight) {
        return props;
      }
      const children = [
        ...React.Children.toArray(props.children),
        React.createElement(OriginalText, {
          key: '__text_fix',
          style: {
            lineHeight: style.lineHeight + 0.0001,
          },
        }),
      ];
      props.children = children;
      return props;
    }),
  );
}

Before

After

fabOnReact · 2024-01-25T22:47:02Z

@XantreGodlike I believe this should be fixed in rn-core. If the developer needs:

to find this issue (LineHeight is working weird on specific fonts (Android Only) #29232)
read the entire discussion (10-20 comments)
find and apply your patch.

We have 1000+ issues, the dev would end up not being productive and better develop his app with the Android Sdk or iOS SDK. My patch does not fix 1 issue. I plan to fix 1000-2000 issues.

I don't think it is even worth documenting this. distributing 1 patch with react-native-improved and fixing the issue at the source is the solution.

fabOnReact · 2024-01-25T22:48:19Z

My workaround. Is not breaking ref, works as drop in replacement

pnpm i react-fast-hoc

import React from 'react';
import { transformProps } from 'react-fast-hoc';
import * as RN from 'react-native';

// Fix of android lineHeight problems https://github.com/facebook/react-native/issues/29232#issuecomment-1721080348
if (RN.Platform.OS === 'android') {
 // Clone text since we modify it
 const OriginalText = Object.assign({}, RN.Text);
 Object.assign(
   RN.Text,
   transformProps(RN.Text, (props) => {
     const style = RN.StyleSheet.flatten(props.style);
     if (!style.lineHeight) {
       return props;
     }
     const children = [
       ...React.Children.toArray(props.children),
       React.createElement(OriginalText, {
         key: '__text_fix',
         style: {
           lineHeight: style.lineHeight + 0.0001,
         },
       }),
     ];
     props.children = children;
     return props;
   }),
 );
}

Before
After

I will text this solution and implement it in rn-core. If you are interested, you can send PR to https://github.com/fabriziobertoglio1987/react-native-improved. Thanks

fabOnReact · 2024-01-25T22:50:07Z

https://github.com/facebook/react-native/pull/42655/files

XantreDev · 2024-01-25T23:27:36Z

@XantreGodlike I believe this should be fixed in rn-core. If the developer needs:

to find this issue (LineHeight is working weird on specific fonts (Android Only) #29232)

read the entire discussion (10-20 comments)

find and apply your patch.

We have 1000+ issues, the dev would end up not being productive and better develop his app with the Android Sdk or iOS SDK. My patch does not fix 1 issue. I plan to fix 1000-2000 issues.

I don't think it is even worth documenting this. distributing 1 patch with react-native-improved and fixing the issue at the source is the solution.

I am sceptical about patching, it can be complicated and unsafe. But maybe you're doing it in the correct way.
Also our project is 0.72 RN version, so this solution is not appliable for us

XantreDev · 2024-01-25T23:28:42Z

https://github.com/facebook/react-native/pull/42655/files

The issue says that it fixes this bug on new arch

fabOnReact · 2024-01-25T23:51:31Z

The issue does not reproduce when you don't set the lineHeight?

because every text has by default a lineHeight, which is calculated on their font ascent and descent.

React Native often does not work well with custom font, because custom font has different font ascent and descent.

As react native over-rides onMeasure in ReactShadowTextView, it calculates the font lineHeight internally based on their font ascent and descent to calculate the Text height.

but maybe this does not work with custom fonts.

The PR from MD Vacca only sets the lineHeight, but when no lineHeight is set, do we really take in account that the Text onMeasure function correctly calculates height based on the custom font Text ascent and descent?

fabOnReact · 2024-01-25T23:56:50Z

Maybe the issue is not fixed on nested text? The current implementation maybe does not support nested text.

I believe the change now sets 1 lineHeight for the entire Text, so in this case, they would all have lineHeight 20. Previously you could have 2 text with different lineHeight.

https://github.com/facebook/react-native/pull/42655/files#diff-e14e9099724d0087bcf9e2847733e8a132fbcb18c5f0d77d8867ff30528c704eR275

for ex.

<Text style={{lineHeight: 20}}>
Line height 20
    <Text style={{lineHeight: 30}}>Line Height 30</Text>
 </Text>

I worked on something similar in the past and I can easily implement it in text.

Hyuchiha · 2024-01-26T17:05:11Z

In my case, I am using a custom font and only setting the fontSize without specifying a lineHeight. When there are multiple paragraphs or just one, it has a strange effect. In the first lines, it's as if it applies less lineHeight than in the following ones:

XantreDev · 2024-01-26T19:51:16Z

In my case, I am using a custom font and only setting the fontSize without specifying a lineHeight. When there are multiple paragraphs or just one, it has a strange effect. In the first lines, it's as if it applies less lineHeight than in the following ones:

I think the only solution with this workaround is to use lineHeight explicitly. Because we cannot calc lineHeight from font size

react-native-bot · 2024-07-27T05:01:03Z

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.

XantreDev · 2024-07-27T07:35:33Z

Bump

toy0605 added the Needs: Triage 🔍 label Jun 27, 2020

toy0605 mentioned this issue Jun 27, 2020

doesn't work includeFontPadding to false with lineheight. #28331

Closed

react-native-bot added the Platform: Android Android applications. label Jun 27, 2020

safaiyeh removed the Needs: Triage 🔍 label Sep 6, 2020

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 25, 2020

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 26, 2021

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 9, 2022

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 10, 2022

phamfoo mentioned this issue Apr 7, 2022

[Android] Negative margin issues phamfoo/react-native-capsize#2

Closed

phamfoo mentioned this issue Sep 16, 2022

margin issues on android again phamfoo/react-native-capsize#3

Closed

fedirjh mentioned this issue Nov 23, 2022

[$1000] Text composer's height changes when entering a character in the newline Expensify/App#12938

Closed

kacper-mikolajczak mentioned this issue Jul 11, 2024

[$2000] Flickering is seen when entering first character Expensify/App#14799

Open

1 task

react-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 27, 2024

react-native-bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 28, 2024

LineHeight is working weird on specific fonts (Android Only) #29232

LineHeight is working weird on specific fonts (Android Only) #29232

Comments

toy0605 commented Jun 27, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

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

toy0605 commented Jun 27, 2020

toy0605 commented Jun 27, 2020

fabOnReact commented Jul 6, 2020

toy0605 commented Jul 8, 2020

ASCII128514 commented Aug 10, 2020

k1195453766 commented Sep 4, 2020

safaiyeh commented Sep 6, 2020

stale bot commented Dec 25, 2020

boerdjamin commented Mar 26, 2021

roni-castro commented Jun 1, 2021 • edited Loading

emin93 commented Jul 30, 2021 • edited Loading

Starting Point

Strange workaround

Summary

markdalgleish commented Sep 24, 2021

emin93 commented Sep 29, 2021

markdalgleish commented Sep 29, 2021

stale bot commented Jan 9, 2022

SleeplessByte commented Jan 10, 2022

manoj-clix commented Jan 12, 2022

Starting Point

Strange workaround

Summary

zecergin commented Feb 14, 2022

emin93 commented Feb 18, 2022

darrylyoung commented Jun 14, 2022

psaikali commented Aug 26, 2022

CapsAdmin commented Sep 14, 2022 • edited Loading

felipecsl commented Mar 31, 2023 • edited Loading

KevinvdBurg commented Jun 13, 2023

jerryphm commented Jun 22, 2023

professorkolik commented Jun 22, 2023

shixiaoquan commented Aug 14, 2023

Starting Point

Strange workaround

Summary

sashagreen commented Aug 30, 2023 • edited Loading

carrie503 commented Sep 15, 2023

fabOnReact commented Jan 16, 2024

XantreDev commented Jan 25, 2024

XantreDev commented Jan 25, 2024 • edited Loading

fabOnReact commented Jan 25, 2024

fabOnReact commented Jan 25, 2024 • edited Loading

fabOnReact commented Jan 25, 2024

XantreDev commented Jan 25, 2024

XantreDev commented Jan 25, 2024 • edited Loading

fabOnReact commented Jan 25, 2024

fabOnReact commented Jan 25, 2024 • edited Loading

Hyuchiha commented Jan 26, 2024

XantreDev commented Jan 26, 2024

react-native-bot commented Jul 27, 2024

XantreDev commented Jul 27, 2024

toy0605 commented Jun 27, 2020 •

edited

Loading

roni-castro commented Jun 1, 2021 •

edited

Loading

emin93 commented Jul 30, 2021 •

edited

Loading

CapsAdmin commented Sep 14, 2022 •

edited

Loading

felipecsl commented Mar 31, 2023 •

edited

Loading

sashagreen commented Aug 30, 2023 •

edited

Loading

XantreDev commented Jan 25, 2024 •

edited

Loading

fabOnReact commented Jan 25, 2024 •

edited

Loading

XantreDev commented Jan 25, 2024 •

edited

Loading

fabOnReact commented Jan 25, 2024 •

edited

Loading