ReactUnity / core

React and HTML framework for Unity UI & UIToolkit

https://reactunity.github.io/

MIT License

735 stars 42 forks source link

[UGUI] Text scaling with `rem` is not the same as in web browsers #70

Closed Muchaszewski closed 1 year ago

Muchaszewski commented 1 year ago

The rem scaling is not as in the web browsers. Generally, the text is too big in ReactUnity.

I will discuss the following text with the only variable as font-size.

<span style="font-size: medium;">Go to src/index.tsx to edit this file</span>

font-size: medium is computed as 1rem which is equal to 16px.

In ReactUnity while using UGUI it's computed as 24px which is too big compared to Chrome.

When manually changed to proper 16px they look almost identical.

Muchaszewski commented 1 year ago

Additional information:

em Unit: The em unit allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.
rem Unit: The rem is based upon the font-size value of the root element, which is the element. And if the element doesn’t have a specified font-size, the browser default value of 16px is used. So here only the value of the root is considered, and there is no relation with a parent element.

as for the reactUnity example, no CSS style or root of HTML has been changed

Muchaszewski commented 1 year ago

Relative em scaling seems to work properly (except for the oversized starting size)

HTML

<html>
    <body>
        <span>Chrome</span><br/>
        <span style="display: flex; flex-direction: column; font-size: 2em">
            2em text
            <span style="display: flex; flex-direction: column; font-size: 2em">4em text
                <span style="display: flex; flex-direction: column; font-size: 2em">
                    6em text
                </span>
            </span>
        </span>
    </body>
</html>

ReactUnity

import { Renderer } from '@reactunity/renderer';

function App() {
  return <div>
    <text>ReactUnity</text>
    <span style="font-size: 2em">
            2em text
            <span style="font-size: 2em">4em text
                <span style="font-size: 2em">
                    6em text
                </span>
            </span>
        </span>
  </div>;
}

Renderer.render(<App />);

KurtGokhan commented 1 year ago

The cause of this is simple, root font size is defined as 24px in ReactUnity instead of browser's 16px. This was done with the thought that games usually require bigger fonts.

The font size is defined in useragent stylesheet. It can be easily overridden with:

:root {
  font-size: 16px;
}

When we add a useragent stylesheet for browser rendering compatibility, this should be easy to fix.

KurtGokhan commented 1 year ago

Changed default font size to 16px in v0.14.0