[UGUI] Line-Height with `rem` is not the same as in web browsers
Muchaszewski opened this issue · 3 comments
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 #72
NOTE Manualy fixed to size 16px in ReactUnity for fair comparison for all elements #70
Fixed font size to 16px and content provided via {`text`} syntax
4rem
As you can see the top padding of line spacing is not preserved
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.
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.
There are some unsolvable things like there is a space on the bottom when line-height is smaller than font-size.
Implemented it as in the comment above. Released in v0.14.0