Hacker News Reader

Comment by pornel | Hacker News Reader

I actually like this behavior.

Sometimes I need text to match size of background-image that is not scaled and has size in pixels (especially important if you use CSS sprites).

In other places I can use `em` to signify that text can be freely enlarged and won't break layout.

iPhone and WP7 IE have -(webkit|ms)-text-size-adjust for this.

View on HN

I'm pretty sure this used to be the 'right way' of doing things: use 'px' when the text shouldn't be resizable (apart from via page zoom) and 'em' when it should be resizable.

I speculate that the other browsers opted to make 'px' text resizable because a large number of sites use 'px' text, perhaps inadvertently due to lack of accessibility testing. So for these sites it's more user-friendly to make 'px' text resizable, than forcing the user to zoom the whole page.

You're right, this used to be "the way" to make text that didn't scale on zoom, back when IE6 was king. But now that Firefox, Safari, and all the cool kids have pretty much standardized full-page-zoom instead of page-layout-zoom, I guess the IE team is being stubborn about moving to the new way of doing things.

On a related note, I still haven't seen any full-viewport HTML5 apps that don't break terribly on zoom in some/all browsers. It really is a terribly tricky behavior to understand, and probably the least consistently implemented.

But now that Firefox, Safari, and all the cool kids have pretty much standardized full-page-zoom instead of page-layout-zoom, I guess the IE team is being stubborn about moving to the new way of doing things.

FYI, IE invented full page zoom. The "cool kids" wisely borrowed it from IE for their browsers.

When did they do that? I first saw it in Opera, and that was years before the other browsers had it.

Opera? Is that a browser? Like for surfing the internet and stuff?

If so, there is at least one thing Opera did not have before the other browsers. Guess what?

In Opera by about 2000, I believe, when IE 5.5 was all the rage.

Opera 2.10 — Dec. 09, 1996. Features: […] Zoom: proportional full page scaling from 20% to 1000%

http://www.opera.com/docs/history/

IE was 10 years late to the party.

I agree that it's a sensible behavior -- I've always wondered why the 'px' unit even exists if it scales just like everything else. That said, what does the CSS standard say?

Would browser zoom be under the purview of the CSS standard?

Do you mean zoom, or changing font size? Because zoom scales everything, images included. Scaling affects only text, and ideally, things that are sized relative to the text (but not pixels).

It's a little complicated and (I'd argue) mildly broken[1], but roughly, 'in', 'cm', and 'pt' all refer to real-world distance measurements; 'em', 'en', and 'ex' refer to sizes relative to the font size; 'px' is a modified real-world measure that scales with distance[2]; and there is nothing at all that refers to actual, honest-to-god pixels. Scaling 'px' during a zoom is no more standards-violating than scaling 'in' etc. during a zoom.

[1]Because 'px' doesn't refer to pixels.

[2]It refers to a unit that scales according to display resolution and usual distance from eye; essentially it's a measure of the angle subtended on your retina. This is useful because (in theory) 1px will look "the same size" (and be about as legible) on a mobile phone, on a laptop, on a desktop, or on a projector, whereas 1in or 1pt(=1/72in) will appear much smaller if further away. What 1px is not, however, is a "pixel".

Now comes the question: if 'px' isn't it, is there any unit that corresponds 1:1 with a bitmapped image?

At default zoom level, 1 px should be 1 pixel except on "retina" displays where it is 2 pixels or printers where it is 3-5 dots. http://webkit.org/blog/55/high-dpi-web-sites/ http://www.w3.org/TR/CSS21/syndata.html#length-units

Yes, px. Bitmaps should be scaled from device pixels to CSS pixels.

Personally, I consider fixing test size to basically be an anti-pattern. You're sacrificing UX for design (which while it can be good business is never Good.)

It's much preferable to using images in place of text, though.

Images aren't fixed in size when zooming any longer, so why compare?

I've found when you're trying to control how web pages print out (never easy to do correctly across every browser), fixing text size in px without the ability to resize it by the client is a good thing.

This is what print stylesheets are for.

Isn't the hole idea behind HTML to give the client, that has the knowledge about local condition, the discretion to handle rendering? If you want to control rendering, use a picture or PDF.

Keep in mind though that IE only won't resize text based in pixels, so only the initial value is taken into account if I'm not mistaking.

You can do font-size: 76.5%; for the html element, and font-size: 14px; for body, and it should resize (because the base is set in a relative unit).

Reply on news.ycombinator.com