Hacker News Reader

Comment by g15jv2dp | Hacker News Reader

When the website loaded, my first action was to zoom out, because the author chose a humongous font size. Somehow, this set off a chain reaction of font size changes that took a few seconds to resolve; I don't know what goes on, but zooming out lowered the size of the body text, then after a noticeable lag the size of the header, which then increased again (?) and then the font size of the body increased again (???). I have trouble believing that a website with this kind of behavior would contain a useful "CSS Tip".

View on HN

It's because all the font sizes in the page are relative to:

   html {font-size: calc(0.5vw + 1rem)}

In other words, the (user configurable) browser default size plus 0.5% of the viewport width, which is kind of insane. One (intended?) side effect is that the font size grows and shrinks as you resize the browser window horizontally.

Yes, viewport units (like vw) don't always respect user settings, such as zoom levels or custom font sizes.

It seems like a good idea at first (larger viewport? larger text!) but not a recommended practice.

There's a better way to do this:

    html { font-size: clamp(16px, 2vw, 20px); }

Pick a reasonable minimum and maximum, and between them a calculated value that scales with viewport width. (You can see this in action in the sites in my bio.)

There really is good info in the article. It’s less a tip and more detail on the spec that I didn’t know.

I think it's some CSS transition, not Javascript, but yeah that is really distracting..

The author is generally in no position to lecture anyone about css…

https://imgur.com/a/uEwI5mk

Honestly, the typesetting on the entire page is an absolute mess.

Exactly. Learning about layout from whoever created this page is like going up to Charlie Brown and asking him to teach you how to fly a kite.

The article doesn't talk about layout or design. Is there anything you object to in the information? Or is it just the 12+yr old design of a personal website you want to snipe about?

All I'm suggesting is that the general attitude embodied by that page ("Your browser developer doesn't know how to handle zooming. Here, let me show you how it's done") seldom makes the impression the author would like to achieve.

Self-awareness is important when you set out to teach others.

Now I want to see a CSS blog by Charlie Day of It's Always Sunny in Philadelphia.

On a mobile zoom seems to work normally, but pinch-zoom is not the same as browser zoom (ctrl + mousewheel).

Yes, mobile zoom is normally just cropping the viewport and showing only a part of the total website. Desktop browser basically adjust the font size of the root element to zoom, I think.

"Desktop browser" zoom changes the virtual screensize. 50%zoom gets you 2 times document.body.clientWith

So all the elements that refer to the screensize, will update automatically, but usually this is quite smooth.

But you can listen for the event and do all kinds of things manually (and maybe too much).

I wonder whether it worked well in 2012 when the article was written?

Likely an effect of the circular dependency of stuff. Even with javascript off it's weird, and even at 20% zoom level the font keeps growing up to something I would already consider as too large.

Oh well, css sucks, but it's at least funny to look at.

CSS is specifically designed so that are no circular dependencies (beyond a fixed number of required passes).

It is really fun to watch it as you zoom though!

But yeah, that is the worst reaction I've seen from a page when zooming.

Can confirm. But is it a bug or is it a feature?

If a page malfunctions in a way that 99.999% of sites don't, it's not a feature.

Clearly you haven't heard about the latest CSS feature: closed-loop font size control.

No joke, I've implemented closed-loop font-size control in updateTextSize(), https://www.nayuki.io/res/full-screen-clock-javascript/full-...

Clearly, we need automatic differentiation for DOM attributes, so that Newton-Raphson could be used in such cases.

Reply on news.ycombinator.com