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

Additional information: em Unit: The em unit

[UGUI] Text scaling with `rem` is not the same as in web browsers about core HOT 4 CLOSED

Muchaszewski commented on July 4, 2024

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

from core.

Comments (4)

KurtGokhan commented on July 4, 2024 1

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.

from core.

KurtGokhan commented on July 4, 2024 1

Changed default font size to 16px in v0.14.0

from core.

Muchaszewski commented on July 4, 2024

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

from core.

Muchaszewski commented on July 4, 2024

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 />);