by Shippuu Fri Mar 08, 2019 3:25 pm
March 8
To my dumbfounded surprise, I could not find anything online about anyone that has tried to tackle these font/element scaling issues before. I found "professional guidelines" on how to handle "responsive font scaling", but the only accurate descriptors I can think for those guidelines are that they are horseshit or short-sighted. I will get into why I feel this way, but first I should explain why the font size is such a big deal in the first place. Today's log, and likely the next few, may get rather technical, as fair warning.
As previously mentioned in a February log, my current v4 CSS is defined in the unit of pixels. Pixels are the best unit for absolutely controlling the size of objects, but they do not scale at all. This causes issues with odd aspect ratios or very dense screens, such as a 4k monitor. The unit I have chosen to move to is called an "em". Rather than being a pixel, it is actually based on the size of a capital M. The implications of this are significant; it means that I can define sizes based on how big the font is.
You might think that's pretty useless, but consider this: the element around the text is scaled by the size of the text. This means that problems like words wrapping to extra lines and etc issues simply don't happen, they will always be in exactly the same places at any size. Additionally, when the font size of the page is increased to adapt to a different screen size, everything else will automatically scale accordingly. So everything comes down to scaling the size of the text to match the screen size, and the rest falls into place from there.
Now we loop back to the challenge of determining how to scale the font size by screen size. The professionals say to use a unit called vw to scale font size, as a multiplier of sorts. Every 1 vw unit is 1% of the width of the viewport (to simplify, the visible page). If every monitor in the world was a 16:9 monitor, this would be completely fine. But what if a page designed this way encountered an ultrawide monitor? These have an aspect ratio of 21:9, and you will end up with text scaled for a 1440p monitor, even though you are on a 1080p monitor. It is inherently flawed.
I've had to improvise my own solution to this, and it is unfortunately still rather half-baked. It looks good on 1080p and up, but I don't know whether to make text bigger or smaller at lower resolutions. They have fewer pixels to show content, but are physically smaller. The problem from 1080p and up, however, is at least simple enough. Rather than rely on the width of the monitor, due to the previously mentioned flaw, I have decided to scale by the height of the monitor.
My implementation uses JavaScript instead of CSS, so it is conceptually flawed from the beginning. However, it allows me to use the actual screen size rather than the size of the browser to calculate font sizes. This has two benefits. Firstly, it eliminates having to deal with the height lost from the header of the browser itself, which results in a 1011 pixel tall page on my 1080p monitor. Secondly, it allows the page to be resized within a monitor without causing funky inappropriate rescaling.
With these changes, let's go back to the example from the end of February, of the 1080p monitor and the 4k monitor, both having the same physical size. The 1080p monitor will use a 14px font size and scale everything based on this, to look exactly as it did before. The 4k monitor will recalculate the font size to 28px, and everything on the page will scale based on that size. As a result, the screen will look exactly the same on both monitors.
Unfortunately, I've only completed this conversion for the page frame itself, though it allowed me to fix some long-lasting issues with the page height being incorrect. The actual content of the Armory is still all in pixels.
I've been made aware literally while writing this Dev Log that high resolution displays tend to automatically upscale content based on their pixel density, which took some of the urgency out of this conversion. I do, however, feel it still needs to be done. Having more control of the sizing of the site is not a bad thing.
Even in the worst case scenario that I find out this didn't have to be done at all, it will still cover a standing suggestion made to me before about making the site more usable for people with vision issues. Scaling everything by font size means that when I add a font size setting to theme options, that will allow users to make the Armory larger or smaller based on their preferences.