search

ReactUnity / core

React and HTML framework for Unity UI & UIToolkit
https://reactunity.github.io/
MIT License
733 stars 42 forks source link

[UGUI] Line-Height with `rem` is not the same as in web browsers #71

Closed Muchaszewski closed 1 year ago

Muchaszewski commented 1 year ago

The rem scaling is not as in the web browsers. The rem does not work on the top of the element

I will discuss the following text with the only variable as line-height.

<span style="line-height: medium;">This is multiline<br/>text that we comapre</span>

line-height: 2rem should be computed as 32px

NOTE That when <span> is used with <br/> it's not working as intended -- see issue https://github.com/ReactUnity/core/issues/72 NOTE Manualy fixed to size 16px in ReactUnity for fair comparison for all elements https://github.com/ReactUnity/core/issues/70 image

Fixed font size to 16px and content provided via {`text`} syntax image

4rem image

As you can see the top padding of line spacing is not preserved

KurtGokhan commented 1 year ago

ReactUnity uses TextMeshPro's line-height to implement css line-height. This does not work exactly like browsers. TextMeshPro's implementation is actually more like line-spacing. I considered adding a hack for this, and it may be possible to implement something closer to browsers. Need to investigate though.

KurtGokhan commented 1 year ago

Implemented this. Also had to implement font units like lh for this. These units read the font metrics from the current font and calculate size based on that. I am not confident that it will work in all cases. But overall, I am happy about the results.

image

There are some unsolvable things like there is a space on the bottom when line-height is smaller than font-size.

KurtGokhan commented 1 year ago

Implemented it as in the comment above. Released in v0.14.0