ReactUnity / core

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

[UGUI] `<br>` tag is not respected when considering line height #72

Closed Muchaszewski closed 1 year ago

Muchaszewski commented 1 year ago

When splitting a text into multiple lines, the <br> tag is not considered with the line-height parameter.

Syntax tried (note that some are not valid in JSX, but HTML renders them properly)

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

The only syntax that works is variable injected string

    <span style="line-height: 2rem;">{`This is multiline
text that we comapre`}</span>


should keep the same properties as a manual break line image

More correct result (See https://github.com/ReactUnity/core/issues/71 for more info about line-height issue) image

KurtGokhan commented 1 year ago

br tag is not supported. Not sure if we can support it, since block/inline layout is not also supported. We only have flex layout.

However br tag is supported in richtext

Muchaszewski commented 1 year ago

In that case, maybe rich text should be enabled by default to support this? This might have unwanted consequences but might be worth an effort.

Another idea would be to custom parse <br> tags in the text the same way as richtext does it but you would have more control over the implementation, on what to support and what to render as
tag.

KurtGokhan commented 1 year ago

Rich-text is already enabled by default but there is a difference between this:

<span>This is multiline<br/>text that we comapre</span>

And this:

<span>{`This is multiline<br/>text that we comapre`}</span>

First one will not work but second one will. In the first one, br is treated as just another React component. This will also work:

<richtext>This is multiline<br/>text that we comapre</richtext>

Because we handle children of the richtext in a special renderer.

But maybe this case can be fixed by converting all br tags to newline character. I will check.

KurtGokhan commented 1 year ago

Added a basic br component in v0.14.0. It is not perfect but it should work for most cases.