Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Style][iOS]The style lineHeight behaves not exactly same as CSS #2991

Closed
cxfeng1-zz opened this issue Sep 24, 2015 · 8 comments
Closed

[Style][iOS]The style lineHeight behaves not exactly same as CSS #2991

cxfeng1-zz opened this issue Sep 24, 2015 · 8 comments
Labels
Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@cxfeng1-zz
Copy link
Contributor

I write a Text component whose style is:

text: {
    height: 60,
    fontSize: 12,
    width:50,
    padding:5,
    color: 'rgb(238, 238, 238)',
    fontFamily: 'Helvetica Neue',
    lineHeight: 50,
    backgroundColor: 'rgb(190, 173, 146)'
  },

It appears like this in iOS device :

2015-09-23 9 33 12

But in Web, it is supposed to be like :

2015-09-23 9 38 05

The text should be vertically centered.

Is there any way to fix this ? Some FE is used to use lineHeight=height to make the text vertically centered.

@cxfeng1-zz cxfeng1-zz changed the title The style lineHeight not exactly same as CSS The style lineHeight behaves not exactly same as CSS Sep 24, 2015
@cxfeng1-zz cxfeng1-zz changed the title The style lineHeight behaves not exactly same as CSS [Style][iOS]The style lineHeight behaves not exactly same as CSS Sep 24, 2015
@astreet astreet added the Platform: iOS iOS applications. label Sep 24, 2015
@cxfeng1-zz
Copy link
Contributor Author

In addition, the text height measured in RCTMeasure is also not exactly same as H5, about 1.5px smaller than H5's text height

@ide
Copy link
Contributor

ide commented Sep 25, 2015

What is "H5"? Do you mean an h5 element?

@cxfeng1-zz
Copy link
Contributor Author

@ide H5 = HTML5 = Web, I used same CSS style in Web, but it behaves differently.

@ide
Copy link
Contributor

ide commented Sep 25, 2015

OK. The centering behavior should probably be the same but I'm not sure about the text height. There are some things that iOS and Android and browsers all do differently and font rendering is one of them.

@timzaak
Copy link

timzaak commented Sep 30, 2015

I wrote a demo in https://rnplay.org/apps/mJMANg.
and the lineHeight has no effect on Android.
maybe. I should use marginTop/marginBottom instead of lineHeight.

@iplus26
Copy link

iplus26 commented Nov 14, 2015

Does this issue have a good solution?
I have the same problem and it cause a lot problems when typesetting.

@john916zhang
Copy link

Same problem here. I set lineHeight to 40, but the real line height is 40.975.

@xueduany
Copy link

Sure, I found this problem when I use line-height attribute ,hope that the text is is vertical align in the box,
but it is not.

@ghost ghost closed this as completed in 33dfc9d Jun 10, 2016
ghost pushed a commit that referenced this issue Jun 10, 2016
Summary:
First PR!!

This fixes #2991 :)
Closes #7603

Differential Revision: D3417257

Pulled By: bestander

fbshipit-source-id: fca990a973edaf7bae5481d03f5da5de0c085c16
bubblesunyum pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
First PR!!

This fixes facebook#2991 :)
Closes facebook#7603

Differential Revision: D3417257

fbshipit-source-id: 074d56c1dfc0a9ba713e59c804286fd915589eeb
bubblesunyum pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
First PR!!

This fixes facebook#2991 :)
Closes facebook#7603

Differential Revision: D3417257

Pulled By: bestander

fbshipit-source-id: fca990a973edaf7bae5481d03f5da5de0c085c16
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
First PR!!

This fixes facebook#2991 :)
Closes facebook#7603

Differential Revision: D3417257

fbshipit-source-id: 074d56c1dfc0a9ba713e59c804286fd915589eeb
mpretty-cyro pushed a commit to HomePass/react-native that referenced this issue Aug 25, 2016
Summary:
First PR!!

This fixes facebook#2991 :)
Closes facebook#7603

Differential Revision: D3417257

Pulled By: bestander

fbshipit-source-id: fca990a973edaf7bae5481d03f5da5de0c085c16
@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 21, 2018
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants