CSS User-defined Constants and Auto Font Size Scaling

Okay, the last post was quite negative and triggering, so let's change gears a little and talk about something different.

I've been tweaking my personal domain in the recent few days, partly to streamline a bit to make things more maintainable, and partly to fix some long-standing aesthetic issues.

One of the first things that I figured out is the use of CSS variables, or more specifically, the global ones. I use them not as variables, but as some kind of symbolic constant to keep those magic numbers away from appearing from within the CSS file itself. Some examples of the magic numbers that I magicked away include:

• The basic indentation space;
• Highlight colours of various sorts; and
• Contrast colours of various sorts.

That made it much easier to set various HTML elements' properties in a more consistent manner.

The other thing that I was tweaking involved what I would call ``font size rescaling''. The problem I was facing was this: when I was using (say) <pre> tags to create ASCII art, they tend to stay more or less the same, until the browser window is sufficiently narrowed to the point that the original text extends out to scroll horizontally.

I fixed that issue (and the other one involving tables, most notoriously for my Instrument Range Visualiser) through auto-injected JavaScript that does funky-ass mathematics and DOM manipulation to sort-of achieve the effect of rescaling the font sizes so that things fit correctly.

That solution was very flaky, and did not solve the problem well. There were two reasons:

1. Setting the minimum font size of the browser to anything other than 0 would screw things over---this was to be expected.
2. All that DOM manipulation nonsense didn't sit right with me due to all the arbitrariness.

And that's where I learnt of the vw unit. Simply put, 1vw expands to 1% of the view port's width in pixels.

Combining that with the calc() function and the storage of variables in the :root element to be used as global variables allowed me to define a new scaling factor that is based on both the ``ideal'' width that I had defined, as well as the current width of the view port. That allowed me to eliminate all the funny JavaScript code that was doing the manipulation, and reduce everything down to just a few lines of CSS code.

There was still on technicality though---I didn't want to up-scale the fonts if the width of the view port exceeded my defined ``best fit'' design. This was easily solved through judicial application of the min() function, the original designed value, and the scaled version accordingly.

I liked the end result.

That's about it. Till the next update then.