
In CSS, “px” is not an angular measurement and it is not non-linear - jipumarino
http://omnicognate.wordpress.com/2013/01/07/in-css-px-is-not-an-angular-measurement-and-it-is-not-non-linear/
======
jahewson
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.

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
> 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
1pt = 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).

------
darkhorn
Can we abandon these inches and miles please?!

~~~
maaku
Given 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
1 cm is about one pinky width.

~~~
maaku
Do you navigate with your pinky?

~~~
jlgreco
Yes. 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.

------
twelvechairs
whilst 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
Is 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.

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

~~~
diminoten
The article says,

> The way the CSS authors handled this problem (again, sensibly, IMO), was to
> allow the user agent (ie. the browser) to choose a useful precise size for
> the “px” unit and then size all the other units relative to that “px” unit.

So I'm a little confused about what you mean when you say, "Nope! "px" is
defined by the CSS spec."

~~~
jahewson
These are both correct. The CSS 2.1 spec actually defines a CSS pixel ("px")
as " _the whole number of device pixels that best approximates the reference
pixel_ ". It's to allow a little leeway for devices with low-resolution
screens. On a high-resolution screen a CSS pixel should be = the reference
pixel.

~~~
Macha
To the best of my knowledge, on iOS, 1 CSS px has been 2 device pixels for a
while. Might even be 4 device pixels on Retina devices.

~~~
jahewson
Right, so a CSS pixel is equal to the reference pixel in size.

------
ivanhoe
Don'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
It 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
yes, 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)

------
kickingvegas
Here 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)

~~~
jahewson
> 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__
> 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
Right 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?

------
Kiro
So should you just use em for everything?

~~~
blauwbilgorgel
em 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
The 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.

~~~
marijn
But note that px is also relative to the zoom level, as unintuitive as that
sounds.

~~~
molf
Not to the text zoom level.

------
rahul286
We 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
Most 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 :-/

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

------
JacobIrwin
Key takeaway: "1px is always equal to 0.75pt."

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

~~~
omnicognate
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...)]

~~~
jmillikin

      > 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 closest match to the concept of a "monitor pixel" is a unit which
represents one pixel. In other words, an element styled as "width: 100px"
would be 100px wide regardless of the size of each individual pixel.

The issue with declaring that one csspixel is a monitor pixel is that it's
only true for a very narrow range of monitors. It's not true for my phone, or
my tablet, or my laptop, or my desktop. There is not a single machine I own
for which 1 css pixel is 1 monitor pixel, and that situation is unlikely to
change unless I decide to start building my machines with ancient 96-DPI LCDs.

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

No, it's not. My browser is bending to make "width: 1px" match some arbitrary
size defined in the CSS spec, which is nowhere near the size of a pixel on my
machine.

The browser is entirely capable of rendering css pixels as screen pixels,
obviously. It's also capable of rendering with real-world sizes, by querying
the physical size of the display from the OS and dividing by the current
display resolution. But it doesn't do any of those things, because someone on
the CSS committee wrote the equivalent of "pi = 3".

~~~
mark-r
HTML+CSS is designed to make things as device-independent as possible. If the
definition of "width: 100px" were to be vastly different on different devices
this goal would be unobtainable. As long as the definition of px is some
_integer multiple_ of device pixels I think it's a useful compromise. If you
really need precision at the level of device pixels you should be writing a
native app.

~~~
sesqu
It's a useful compromise for the OS to make, but does not belong in CSS. If
I'm running on a non-native resolution, I expect the image containers to scale
on websites to fit the images, which they won't if the browser overrides my
1.4 pixel pixels.

Whatever did happen to screen pixels, anyway? Did non-native resolutions die
with CRT screens? It's nice to have a unit for 0.27 mm-ish, but I'd really
have more use for a pixel.

