ReactUnity/core

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

Muchaszewski opened this issue · 4 comments

Muchaszewski commented

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.
image

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

Muchaszewski commented

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

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>

image

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

image

KurtGokhan commented

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.

  • 👍1
KurtGokhan commented

Changed default font size to 16px in v0.14.0

  • ❤️1