6 ms·

IE 9 does not resize text sized in pixels

24 points by toni 16y ago

pornel 16y ago
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.
- sprout 16y ago
  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.)
  - mrkurt 16y ago
    It's much preferable to using images in place of text, though.
    - eru 16y ago
      Images aren't fixed in size when zooming any longer, so why compare?
- gxti 16y ago
  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?
  - endtime 16y ago
    Would browser zoom be under the purview of the CSS standard?
    - gxti 16y ago
      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).
  - blahedo 16y ago
    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".
    - seabee 16y ago
      Now comes the question: if 'px' isn't it, is there any unit that corresponds 1:1 with a bitmapped image?
      - wmf 16y ago
        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://webkit.org/blog/55/high-dpi-web-sites/ http://www.w3.org/TR/CSS21/syndata.html#length-units http://www.w3.org/TR/CSS21/syndata.html#length-units
      - pornel 16y ago
        Yes, px. Bitmaps should be scaled from device pixels to CSS pixels.
- pak 16y ago
  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.
  - qeorge 16y ago
    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.
    - JeffJenkins 16y ago
      When did they do that? I first saw it in Opera, and that was years before the other browsers had it.
      - eiji 16y ago
        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?
      - seabee 16y ago
        In Opera by about 2000, I believe, when IE 5.5 was all the rage.
      - deleted 16y ago
        [deleted]
    - pornel 16y ago
      Opera 2.10 — Dec. 09, 1996. Features: […] Zoom: proportional full page scaling from 20% to 1000% http://www.opera.com/docs/history/ http://www.opera.com/docs/history/ IE was 10 years late to the party.
- jasondavies 16y ago
  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.
- bluedevil2k 16y ago
  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.
  - eru 16y ago
    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.
  - thwarted 16y ago
    This is what print stylesheets are for.
- headsclouds 16y ago
  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).
kamechan 16y ago
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.
- CognitiveLens 16y ago
  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.
- wait 16y ago
  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.)
  - drdaeman 16y ago
    > 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.
efsavage 16y ago
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.
cemregr 16y ago
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.

24 points by toni 16y ago

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.

sprout 16y ago
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.)
- mrkurt 16y ago
  It's much preferable to using images in place of text, though.
  - eru 16y ago
    Images aren't fixed in size when zooming any longer, so why compare?
gxti 16y ago
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?
- endtime 16y ago
  Would browser zoom be under the purview of the CSS standard?
  - gxti 16y ago
    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).
- blahedo 16y ago
  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".
  - seabee 16y ago
    Now comes the question: if 'px' isn't it, is there any unit that corresponds 1:1 with a bitmapped image?
    - wmf 16y ago
      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://webkit.org/blog/55/high-dpi-web-sites/ http://www.w3.org/TR/CSS21/syndata.html#length-units http://www.w3.org/TR/CSS21/syndata.html#length-units
    - pornel 16y ago
      Yes, px. Bitmaps should be scaled from device pixels to CSS pixels.
pak 16y ago
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.
- qeorge 16y ago
  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.
  - JeffJenkins 16y ago
    When did they do that? I first saw it in Opera, and that was years before the other browsers had it.
    - eiji 16y ago
      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?
    - seabee 16y ago
      In Opera by about 2000, I believe, when IE 5.5 was all the rage.
    - deleted 16y ago
      [deleted]
  - pornel 16y ago
    Opera 2.10 — Dec. 09, 1996. Features: […] Zoom: proportional full page scaling from 20% to 1000% http://www.opera.com/docs/history/ http://www.opera.com/docs/history/ IE was 10 years late to the party.
jasondavies 16y ago
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.
bluedevil2k 16y ago
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.
- eru 16y ago
  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.
- thwarted 16y ago
  This is what print stylesheets are for.
headsclouds 16y ago
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).

kamechan 16y ago

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.

CognitiveLens 16y ago
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.
wait 16y ago
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.)
- drdaeman 16y ago
  > 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.

efsavage 16y ago

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.

cemregr 16y ago

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.