IE 9 does not resize text sized in pixels | Hacker News Reader

IE 9 does not resize text sized in pixels

456bereastreet.com

24 pointstoni28 comments

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.

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 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.

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'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.

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).

This behavior not only seems sensible to me but appropriate. If one uses pixels then one wants a pixel-perfect layout so therefore doesn't want fonts to scale.

The problem is that pixel-perfect layouts are no longer pixel perfect when the page zooms and the text doesn't, or vice versa. Full page zoom keeps everything in proportion.

And that's a huge problem. The notion of a "pixel-perfect design" doesn't belong on the web. In the case you mention, you're sacrificing accessibility for control over what your users see. You're kind of telling your users that you know what they want better then they do. That they should be able to read the small type you put in front of them, even if their eyes are bad.

CognitiveLens is right. Proportions matter.

(Note: when I say "you", I refer to the "one [who] wants a pixel-perfect layout" which may or not actually be you.)

> The notion of a "pixel-perfect design" doesn't belong on the web.

So, if this is the case, then "px" units and raster graphics should not belong on the Web, too. But unfortunately, they do.

IMHO, the best approach would be to have two zoom modes. Some users prefer scaling text, but keeping images inact (so they won't see upscale ugliness), others prefer "screen magnifier"-like behavior. And none of those behaviors is wrong.

This is the way the CSS spec was written. Firefox (and then KHTML) specifically went against the spec. This is because they didn't have page zoom, and too many developers were using px because it was far more consistent than any other unit across browsers.

From CSS2 spec:

"Relative units are: * em: the 'font-size' of the relevant font * ex: the 'x-height' of the relevant font * px: pixels, relative to the viewing device"

Changing font size doesn't affect your device (browser), but zooming does.

95% of the web pages out there (I totally made that number up) use 'px' to specify font sizes. Had we designers/developers been more sensible and popularized 'em', I wouldn't mind this.

But I think this greatly undermines accessibility, and accessibility is way more important than pixel-perfect layouts.

Reply on news.ycombinator.com