IE 9 does not resize text sized in pixels(456bereastreet.com)

IE 9 does not resize text sized in pixels

http://www.456bereastreet.com/archive/201010/ie_9_does_not_resize_text_sized_in_pixels/

4 comments

pornel16 anni fa

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.

jasondavies16 anni fa

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.

pak16 anni fa

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.

qeorge16 anni fa

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.

JeffJenkins16 anni fa

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

[deleted]16 anni fa

seabee16 anni fa

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

eiji16 anni fa

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?

pornel16 anni fa

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.

gxti16 anni fa

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?

blahedo16 anni fa

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

seabee16 anni fa

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

wmf16 anni fa

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

pornel16 anni fa

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

endtime16 anni fa

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

gxti16 anni fa

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

sprout16 anni fa

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

mrkurt16 anni fa

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

eru16 anni fa

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

bluedevil2k16 anni fa

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.

thwarted16 anni fa

This is what print stylesheets are for.

eru16 anni fa

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.

headsclouds16 anni fa

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

kamechan16 anni fa

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.

wait16 anni fa

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

drdaeman16 anni fa

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

CognitiveLens16 anni fa

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.

efsavage16 anni fa

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.

cemregr16 anni fa

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.