11 ms·
In CSS, “px” is not an angular measurement and it is not non-linear
- deleted 13y ago[deleted]
- Kiro 13y agoSo should you just use em for everything?
- maaarghk 13y agoNot everything - this article is wrong that CSS defines em as being based on "m" [1] (includes actual quote [2] from w3c spec) [1] http://stackoverflow.com/a/4531441/1971539 http://stackoverflow.com/a/4531441/1971539 [2] The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.
- omnicognate 13y agoI'm the author of the article (the reponse not the original). I didn't say em is based on "m". All I said about em is: "(For completeness, I should mention here that the "em" and "ex" units are exceptions to the above. The lengths 1em and 1ex do vary relative to the other units, because they depend on the font in use.)" I'll update this to say "font size" as I didn't mean to give the impression that it was dependent the choice of font.
- maaarghk 13y agoI was nit picking to be fair. But font size certainly does clear up the ambiguity.
- blauwbilgorgel 13y agoem or relative font-sizing seems like a good choice. Also see rem [1] which was introduced with CSS3 to combat issues with font size compounding. Use pt for print stylesheets [2]. For a bit of ancient internet history: http://style.cleverchimp.com/font_size/points/font_wars.GIF http://style.cleverchimp.com/font_size/points/font_wars.GIF [1] http://snook.ca/archives/html_and_css/font-size-with-rem http://snook.ca/archives/html_and_css/font-size-with-rem [2] http://www.w3.org/Style/Examples/007/units.en.html http://www.w3.org/Style/Examples/007/units.en.html
- molf 13y agoThe rem unit is awesome! All the benefits of em (relative to browser text zoom level) combined with the benefits of px (does not change depending on parent element font size). If you don't need to support IE8 you should start using rem today.
- ars 13y agoNo. Because if you do, when you want to slightly adjust the font size, suddenly nothing fits on your page, and you have to fix the sizes of all the boxes. Use em when you don't care about the exact size, you just want some space. Em is also a poor choice for borders.
- jmillikin 13y agoThis response is taking issue with the words used, rather than the underlying claim of the original article. In fact, this response contains a whole section and a diagram which are effectively supporting evidence for the original! The most important thing to take away from the original is that the css unit "px" has no relationship to the actual size of a pixel on the screen, and all the physical units (inch, cm, pt) are defined in terms of the csspixel. So marking a button as "width: 1cm" will almost never render something over 1cm of the screen geometry. Incidentally, this is why designers like device models with only a few geometries, such as the iPhone. They can do the math themselves to work out how many iphone-pixels are in a cm, and write their styles accordingly.
- city41 13y agoThe article also mentions that on some devices, the anchor unit is cm and not px. So on those devices setting something to 1cm should render the item at an actual cm in size.
- RyanZAG 13y agoHow many px is 180 degrees then? or even 75 degrees? Obviously it doesn't work because degrees aren't linear and px are linear. That's the point of the article - confusing angles and px is a very bad move that might appear to work until it doesn't.
- tomp 13y agoWhat do you mean, degrees are not linear? I'm a mathematician, and I think they are inarguably linear, so I'm assuming we're using different definitions of "degrees" or of "linear". Edit: By any chance, do you mean "the projection of an angle measured in degrees on a straight line measured in {cm/m/whatever} is not linear"?
- garethadams 13y agoThat is exactly what he means. I guess it might have been explained better in the comment, but that's the whole point the article is making: that the "reference pixel" for a given display is calculated by taking a certain visual angle (based on a specified DPI/distance) and projecting it onto a perpendicular surface at the expected viewing distance. If the reference pixel is the viewing angle then multi-pixel measurements don't map linearly to on-screen sizes unless the screen they're designed for is the concave face of a sphere centred on the user's eye
- twelvechairs 13y agowhilst the detachment of 'px' and screen pixels is a no brainer in the modern world with its proliferation of pixel densities and viewing distances on different devices, the CSS standard could probably do a better job of explaining this.
- gmjoe 13y agoIs it really the place of the CSS standard to define it? Is that even remotely necessary? I mean, every device is different. You don't want a "px" on your phone to be the same as a "px" on your desktop, which also shouldn't be the same as a "px" on your projector. A "px", right now, is whatever the device+OS combo wants it to be, but that works, because they all try to make things the "right size" given the device size, resolution, and distance from your eye. And it works fine. Just accept that "px" is device-defined, and it all works, just like it does now in practice.
- twelvechairs 13y agomaybe it doesn't have to, but it does and does a poor job at it
- jahewson 13y ago> Just accept that "px" is device-defined Nope! "px" is defined by the CSS spec. The physical pixels are device-defined as is the exact anti-aliasing algorithm but the spec dictates the dimensions of a logical ("px") pixel in the real world. Devices are not free to make "px" whatever they want it to be, because "px" is a logical pixel not a physical one. (Though it is a physical length). A classic example of why this matters is that Windows treats the screen as 96dpi but OS X treats it as 72dpi. If the CSS spec did not dictate the size of a "px" then all web pages on OS X would look 26% smaller than on Windows.
- speleding 13y agoThe px would look larger on a screen with the lower dpi
- deleted 13y ago[deleted]
- kickingvegas 13y agoHere we go again. IMHO, we need a new unit to unambiguously describe angular measure. But also we need to start demanding resolution independent units that map to real world measurements as well. https://news.ycombinator.com/item?id=4236429 https://news.ycombinator.com/item?id=4236429
- VikingCoder 13y ago...except you need to know how far a user's eyeballs are from the screen to do that. Each eyeball will have a different answer.
- jahewson 13y ago> we need a new unit to unambiguously describe angular measure. That's a nonsense unit. You'd need to know where my eyeballs are and change the measure as I move my head around! What happens if two people are looking at the screen? > we need to start demanding resolution independent units That's what CSS pixels are. A pixel is 0.26 mm, period.
- __david__ 13y ago> That's what CSS pixels are. A pixel is 0.26 mm, period. For some definition of "mm". Did you read the part about "anchoring"?
- jahewson 13y agoRight but that's just "for lower-resolution devices", i.e. devices with a resolution lower than the reference pixel. There's no use demanding to have units of measure which the device is incapable of displaying! What possible use would it serve?
- kickingvegas 13y agoFWIW, you'd need some profile spec to constrain the problem of what eyeball distance you're looking from. One approach might be to define profiles for desktop, mobile, and projector distances. Is it meant to be accurate? No. But it can stop people from trying to munge angular measures with distance measures.
- LindaSTadlock 13y agoI must give my thanks to LUKE MEREDITH, who posted here last week comment aℬout system she uses to earn online... I've got my FIRST check total of $550, pretty cool. I am so exicted, this is the first time I actually earned something. I am going to work even harder new and I can't wait for next week payment. You can try it for yourself......... http://www.works23.com http://www.works23.com
- darkhorn 13y agoCan we abandon these inches and miles please?!
- maaku 13y agoGiven that 1 inch is approximately equal to the width of one's thumb, I would have thought that Imperial units are the natural ones to use in this context...
- eru 13y ago1 cm is about one pinky width.
- maaku 13y agoDo you navigate with your pinky?
- eru 13y agoOnly in Emacs.
- jlgreco 13y agoYes. When I have my phone resting on a flat surface in front of me (say, a bar) I use the outside side of my pinky to scroll. I find it very natural since when my arms are in a neutral position in front of me, my palms are facing inwards and my pinkies are therefore closest to the bar (and the phone). Also if I am eating a sandwich, my pinkies stay the cleanest.
- nilved 13y agoImperial units are not the natural choice in any case at any time.
- garethadams 13y agoAh yes, one seventy-twoth of the approximate width of my thumb. No need to fetch my measuring apparatus, dear!
- ivanhoe 13y agoDon't really understand why is it such a big deal how browsers internally define the size of pixels, do they use dpi or angles (it would be more correct to say trigonometry)? It is an interesting fact that I've never before really gave a thought, but complete irrelevant to anyone but guys building the browser rendering engines. And still now you have people calling for new "better" units and what not? Why? What am I missing?
- amenod 13y agoIt is really helpful if you are web developer. For instance, if you need to alter some layout that was made some other units, it is good to know how the units relate to one another.
- ivanhoe 13y agoyes, sure, but this is not about that, all CSS unit have the fixed relations clearly defined. Angular pixels are just about relative scale between the size on the screen and the real-world size (whatever that would be, because a print size is again relative to the chosen dpi, so it's not an absolute measure)
- jahewson 13y ago> (it would be more correct to say trigonometry)? No
- jahewson 13y agoThis article makes some good points but it's missing a bit of history. The reference pixel is defined at 96dpi because that's how Windows treated the screen in the days before high-dpi support. Mac OS treated the screen as 72dpi in the pre-retina days but most early websites were built to look correct on Windows. That's why MS Office fonts look too small on the Mac to this day: 26% too small to be precise. This explains why CSS uses a human-eye based definition of the reference pixel: to escape from the Windows and Mac OS idea of the having a "logical dpi" which differs from the screen's actual, physical dpi. Indeed, Windows and Mac OS can not agree on what an "inch" is! Go ahead and open up Word and Pages on the Mac and create a 12pt font - see the difference! This is the mess that the CSS reference pixel fixes.
- thaumasiotes 13y ago> This article makes some good points but it's missing a bit of history. The reference pixel is defined at 96dpi because that's how Windows treated the screen in the days before high-dpi support. Mac OS treated the screen as 72dpi in the pre-retina days but most early websites were built to look correct on Windows. That's why MS Office fonts look too small on the Mac to this day: 26% too small to be precise. The only way I can understand this is backwards -- a Windows "pixel" is 1/96 of an inch. (?) A Mac "pixel" is 1/72 of an inch; much larger. Wouldn't a windows font appear too large if displayed on a Mac?
- danbee 13y ago1pt = 1/72 of an inch, therefore a 12pt font is 12 pixels high on a Mac, but 16 pixels high on a PC (12 * 96/72).
- Hellenion 13y agoThe reason the standards don't speak of 2D euclidean geometry is because they (Very sensibly, IMO) left room for yet unknown devices that might not fit that description but still are able to conform.
- deleted 13y ago[deleted]
- JacobIrwin 13y agoKey takeaway: "1px is always equal to 0.75pt."
- rahul286 13y agoWe spent time juggling between em and px before but from few months we are using "rem" unit. It works nicely as we are also using font-icons everywhere. See: http://snook.ca/archives/html_and_css/font-size-with-rem http://snook.ca/archives/html_and_css/font-size-with-rem
- intangible 13y agoMost of our problems would go away if mm was actually a mm and the dpi differences were taken care of by the OS + screen + browser... Ugh. Sounds like we're stuck with inconsistency for various dpi devices for many years to come still :-/