UI - Replace Explicit Font Sizes with Size Labels ("small", "medium", "large", e.t.c.)

[tsnl]

Text does not scale to fit inside tiles when we resize windows. While it is ideal that fonts are rendered at a constant size (in device-independent pixels), we cannot help if a user makes their window so small, the text would otherwise be unreadable. We need a better way to scale font-sizes.

An early implementation of this repo brute-forced a range of font-sizes to find one that would fit in the tile-rectangle specified in the layout. This looked very ugly because two Hp_TextTile instances with text of differing length that we expect to be of the same font-size would render at different sizes.

Thus, we need some way to ensure that:

• All text of the same desired font-size render at the same size.
• There is a partial ordering of rendered text sizes. "large" text should always be larger or the same size as "medium" text.
• Text always fits in the tile it is allocated.

Requirements:

• Change the fontSize style property in Hp._TextTile a font size in 'em' to a size hint. Allow the designer to select from a few options, like "x-small", "small", "medium", "large", "x-large", e.t.c. Whatever you find appropriate.
• At the start of each frame, recompute what em font sizes to use for each label such that the above partial ordering is respected. You can use Hp._context.measureText for this.
• Set a minimum size for the canvas and window depending on what the smallest acceptable font size to render is by mutating the CSS min-width and min-height properties on the canvas.

Note:

• It is not sufficient to compute and cache these font sizes once in updateSize because these values could go stale if someone mutates Hp._BaseTile.tileRect when the window isn't being resized. Also, it shouldn't be too much work to do so every frame for what will never be more than a couple elements.
• I purposely ripped out the multi-line font rendering because it significantly complicates this particular issue. Do not yet worry about fitting text vertically. Just focus on text width (since that's all measureText really helps you with).

[richiesomething]

If no one is working on this I can work on it. I don't know how to assign myself to it

[richiesomething]

it should be done using the vw/vh modern font sizes. See this mdn wiki for info https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units

[richiesomething]

submitted pr