5 ms·

This 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

This 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 ago
The 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 ago
How 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 ago
  What 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 ago
    That 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
    - Steuard 13y ago
      As I understand this article (and my long-past reading of the spec), the only thing in the spec that talks about visual angle is the part about defining the size of one reference pixel. That's a very small angle, and at those sizes angular size is essentially linear even when projected onto a flat screen. Nothing that I've seen in the spec ever remotely suggests using angular measurements for more than one pixel at a time, let alone enough of them for 90 or 180 degrees of the visual field.
      - garethadams 13y ago
        That's all completely true, but the article that this linked article is a response to didn't draw that same conclusion from the spec, and that's what started this whole mess
      - mistercow 13y ago
        >and at those sizes angular size is essentially linear even when projected onto a flat screen. But not quite, and summed over many pixels, it will result in a noticeable discrepancy (which is still of no practical consequence). I wonder how it would feel to use a computer that used head tracking to dynamically transform the screen's contents so that pixels were mapped to equal angular size (from the point between the user's eyes).
chavesn 13y ago
It doesn't seem like you've actually read the article in its entirety, then (I can't blame you, it was very long but also very well written). The author addresses 1) the counter-argument 2) an explanation for the "angle" wording (the section with the diagrams) which did a much better job of explaining the purpose of the angle than the "px is a non-linear angular unit" article, and 3) a line-by-line reasoning for why that other article was confusing (or outright wrong). All of these sections made more sense than the other article, and in fact established why the points made by the two articles are very different and why it would make no sense for the px unit to be either "angular" or "non-linear".
omnicognate 13y ago
Hi, I wrote this article (the response, not the original). though I didn't post it here - I just noticed the pingback email. I am indeed responding mainly to the wording, and you'll see at the start and end of the article statements that I think the original author does at least kind of understand what is going on (though I don't think his understanding is very solid). Your statement that 'the css unit "px" has no relationship to the actual size of a pixel on the screen' exemplifies why I am concerned about the wording and thought it necessary to write a response. This statement is just not true! The CSS px unit was carefully designed to embody as closely as possible the intuitive concept of a "monitor pixel", while retaining sufficient flexibility to allow implementors to accommodate a wide range of devices. The whole concept of unit anchoring was invented to support this. To pretend the px unit has no relationship to actual pixels is to waste all of this work.(*) I would suggest people aim for one of two levels of understanding: 1. Really understand the rules. Read the standard, and/or a proper CSS book like "Cascading Style Sheets: The Definitive Guide" by Eric Meyer. Be an expert and design with confidence. 2. Altenatively, just think of 1px as a monitor pixel. The standards authors put a lot of effort in to allow people to do so. For people that are currently in state 2 and are uneasy about retina displays, printers and the rest, my advice would be that they are going to need to go to state 1. It's not that hard. Just getting a vague idea (as many people are) that "px" is angular, or worse that it's in some way "unreliable", is not going to help anyone. [PS. Here's an ironic aside about the lengths people have gone to to make 1px correspond as closely as possible to a real pixel: As you say, 'marking a button as "width: 1cm" will almost never render something over 1cm of the screen geometry'. But why exactly is this? It's because the whole system of units has been anchored to the screen pixel size (or a simple multiple or fraction of it). On a printer, where there is no "pixel" worth anchoring to, the units are typically anchored to physical units, and width: 1cm really does mean 1cm. The reason that on your monitor screen 1cm is not 1 real cm is because your browser is resizing everything - it's bending over backwards to make 1px match the screen pixel size! (or a simple multiple or fraction yadda yadda yadda...)]
- kordless 13y ago
  Can you give us a real world example of how this technical mis-understanding would affect my day-to-day design process? Specifically, I haven't ever encountered or designed for a screen yet that extends beyond my peripheral vision. I'm sure they are coming soon though!
haberman 13y ago
> 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 Did you read this article? Did you make it to this part? I’ll just finish by going through a few of the explicit claims made in that article and correcting them: [...] 2. The first sentence: “The “px” unit in CSS doesn’t really have anything to do with screen pixels, despite the poorly chosen name.” – this is obviously complete nonsense. The standards authors went out of their way to give browser authors a way to match the “px” unit up to the real-world device pixel > and all the physical units (inch, cm, pt) are defined in terms of the csspixel. Not for print and other high-res devices (like a Retina display). Did you read this excerpt quoted from the CSS spec? For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.
lnanek2 13y ago
Agreed. Everyone sees the term pixel and thinks it will match a device pixel. This isn't true. The CSS pixel is sized to take up a certain amount of the visual field due to that diagram with a reference screen, distance, and density. The person writing about angular stuff is dead on target explaining to people the difference. The author of the linked article is just nit picking word choice and confusing the issue. No one was applying this past that to then come to the claim the pixel size changed at different degrees, which is the implication that the author of this article seems so upset about. Everyone knows the CSS pixel stays the same size across the entire screen, we don't need to discuss that. We certainly don't need enormous articles like this written to correct a problem no one had. Although overall the spec is really the offender since they never should have called this a pixel.
- garethadams 13y ago
  > No one was applying this past that to then come to the claim the pixel size changed at different degrees, which is the implication that the author of this article seems so upset about. Everyone knows the CSS pixel stays the same size across the entire screen, we don't need to discuss that. We certainly don't need enormous articles like this written to correct a problem no one had. Actually I think this article was (re?)posted in response to another article[1] that made the front page today[2] which did claim that pixels were angular measurements. So certainly some people have had that problem To be honest, since this article is from January this year and the other is (seemingly) from 2009 I'm not sure why it's come up today, but that's the Internet for you! [1]: http://inamidst.com/stuff/notes/csspx http://inamidst.com/stuff/notes/csspx [2]: https://news.ycombinator.com/item?id=6668395 https://news.ycombinator.com/item?id=6668395

city41 13y ago

The 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 ago

How 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 ago
What 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 ago
  That 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
  - Steuard 13y ago
    As I understand this article (and my long-past reading of the spec), the only thing in the spec that talks about visual angle is the part about defining the size of one reference pixel. That's a very small angle, and at those sizes angular size is essentially linear even when projected onto a flat screen. Nothing that I've seen in the spec ever remotely suggests using angular measurements for more than one pixel at a time, let alone enough of them for 90 or 180 degrees of the visual field.
    - garethadams 13y ago
      That's all completely true, but the article that this linked article is a response to didn't draw that same conclusion from the spec, and that's what started this whole mess
    - mistercow 13y ago
      >and at those sizes angular size is essentially linear even when projected onto a flat screen. But not quite, and summed over many pixels, it will result in a noticeable discrepancy (which is still of no practical consequence). I wonder how it would feel to use a computer that used head tracking to dynamically transform the screen's contents so that pixels were mapped to equal angular size (from the point between the user's eyes).

chavesn 13y ago

It doesn't seem like you've actually read the article in its entirety, then (I can't blame you, it was very long but also very well written). The author addresses 1) the counter-argument 2) an explanation for the "angle" wording (the section with the diagrams) which did a much better job of explaining the purpose of the angle than the "px is a non-linear angular unit" article, and 3) a line-by-line reasoning for why that other article was confusing (or outright wrong). All of these sections made more sense than the other article, and in fact established why the points made by the two articles are very different and why it would make no sense for the px unit to be either "angular" or "non-linear".

omnicognate 13y ago

Hi, I wrote this article (the response, not the original). though I didn't post it here - I just noticed the pingback email. I am indeed responding mainly to the wording, and you'll see at the start and end of the article statements that I think the original author does at least kind of understand what is going on (though I don't think his understanding is very solid). Your statement that 'the css unit "px" has no relationship to the actual size of a pixel on the screen' exemplifies why I am concerned about the wording and thought it necessary to write a response. This statement is just not true! The CSS px unit was carefully designed to embody as closely as possible the intuitive concept of a "monitor pixel", while retaining sufficient flexibility to allow implementors to accommodate a wide range of devices. The whole concept of unit anchoring was invented to support this. To pretend the px unit has no relationship to actual pixels is to waste all of this work.(*) I would suggest people aim for one of two levels of understanding: 1. Really understand the rules. Read the standard, and/or a proper CSS book like "Cascading Style Sheets: The Definitive Guide" by Eric Meyer. Be an expert and design with confidence. 2. Altenatively, just think of 1px as a monitor pixel. The standards authors put a lot of effort in to allow people to do so. For people that are currently in state 2 and are uneasy about retina displays, printers and the rest, my advice would be that they are going to need to go to state 1. It's not that hard. Just getting a vague idea (as many people are) that "px" is angular, or worse that it's in some way "unreliable", is not going to help anyone. [PS. Here's an ironic aside about the lengths people have gone to to make 1px correspond as closely as possible to a real pixel: As you say, 'marking a button as "width: 1cm" will almost never render something over 1cm of the screen geometry'. But why exactly is this? It's because the whole system of units has been anchored to the screen pixel size (or a simple multiple or fraction of it). On a printer, where there is no "pixel" worth anchoring to, the units are typically anchored to physical units, and width: 1cm really does mean 1cm. The reason that on your monitor screen 1cm is not 1 real cm is because your browser is resizing everything - it's bending over backwards to make 1px match the screen pixel size! (or a simple multiple or fraction yadda yadda yadda...)]

kordless 13y ago
Can you give us a real world example of how this technical mis-understanding would affect my day-to-day design process? Specifically, I haven't ever encountered or designed for a screen yet that extends beyond my peripheral vision. I'm sure they are coming soon though!

haberman 13y ago

> 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 Did you read this article? Did you make it to this part? I’ll just finish by going through a few of the explicit claims made in that article and correcting them: [...] 2. The first sentence: “The “px” unit in CSS doesn’t really have anything to do with screen pixels, despite the poorly chosen name.” – this is obviously complete nonsense. The standards authors went out of their way to give browser authors a way to match the “px” unit up to the real-world device pixel > and all the physical units (inch, cm, pt) are defined in terms of the csspixel. Not for print and other high-res devices (like a Retina display). Did you read this excerpt quoted from the CSS spec? For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.

lnanek2 13y ago

Agreed. Everyone sees the term pixel and thinks it will match a device pixel. This isn't true. The CSS pixel is sized to take up a certain amount of the visual field due to that diagram with a reference screen, distance, and density. The person writing about angular stuff is dead on target explaining to people the difference. The author of the linked article is just nit picking word choice and confusing the issue. No one was applying this past that to then come to the claim the pixel size changed at different degrees, which is the implication that the author of this article seems so upset about. Everyone knows the CSS pixel stays the same size across the entire screen, we don't need to discuss that. We certainly don't need enormous articles like this written to correct a problem no one had. Although overall the spec is really the offender since they never should have called this a pixel.

garethadams 13y ago
> No one was applying this past that to then come to the claim the pixel size changed at different degrees, which is the implication that the author of this article seems so upset about. Everyone knows the CSS pixel stays the same size across the entire screen, we don't need to discuss that. We certainly don't need enormous articles like this written to correct a problem no one had. Actually I think this article was (re?)posted in response to another article[1] that made the front page today[2] which did claim that pixels were angular measurements. So certainly some people have had that problem To be honest, since this article is from January this year and the other is (seemingly) from 2009 I'm not sure why it's come up today, but that's the Internet for you! [1]: http://inamidst.com/stuff/notes/csspx http://inamidst.com/stuff/notes/csspx [2]: https://news.ycombinator.com/item?id=6668395 https://news.ycombinator.com/item?id=6668395