Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is a CSS pixel really an absolute unit? That is, is 1 inch = 96px true?

Tags:

The official W3C documentation says:

1 px = 1/96th of 1 in

In my previous 18.5 inch screen, the screen.width was 1367 px and the screen width in inches was 14 inches. By the W3C formula:

14 * 96 px = 1344 px

The W3C formula deviated by 20/14 px per inch. Since the deviation is too low, and 1 inch on my screen was 97.4 px I accepted the W3C formula, and believed that a CSS pixel is an absolute unit of measure, meaning it is always equal to 0.75 pt (a physical unit).

This week I bought a 21.5 inch, full HD screen, which has width 19 inches and screen.width is 1920 px. So now 1 inch on my screen is:

1920/19 ~ 101 px

Not only this, my friend's screen is 24 inches, and has the same 1920 x 1080 resolution. Both 24 inches and 21.5 inches cannot correspond to same amount of CSS pixels.

So now, on my screen, CSS pixels is not an absolute unit of measurement. And everything is relatively smaller on my screen. Even that, now I get deluded by my font sizes. When I find 16 px as minimum readable font on my screen, it is actually larger on smaller screens. Because 16 px on my screen is physically the same in centimeters as 14px in centimeters on my previous smaller screen. I am designing my websites wrong and I am not a good front end developer anymore.

So the question:

  • Is a CSS pixel really an absolute unit? That is, is 1 inch = 96 px true?
like image 390
user31782 Avatar asked Nov 08 '16 06:11

user31782


People also ask

How many pixels is an inch CSS?

CSS inch (in) On a computer screen, a CSS inch has nothing to do with the physical inch. Instead, it is being redefined to be exactly equal to 96 CSS pixels.

What is absolute unit in CSS?

Absolute length units are fixed in relation to each other. They are highly dependent on the output medium, so are mainly useful when the output environment is known. The absolute units consist of the physical units ( in , cm , mm , pt , pc ) and the px unit. Unit. Description.

Are CSS pixels real pixels?

A software pixel, also called a CSS pixel in the web world, is a unit of measurement. The device manufacturer determines how many hardware pixels equals one software pixel, a concept known as the device pixel ratio.

How big is a pixel CSS?

The term CSS pixel is synonymous with the CSS unit of absolute length px — which is normatively defined as being exactly 1/96th of 1 inch.


2 Answers

As specified slightly further down the part of the CSS Values and Units Module you've already linked, there are two different implementations that can be applied with CSS:

For a CSS device, these dimensions are anchored either

i. by relating the physical units to their physical measurements, or
ii. by relating the pixel unit to the reference pixel.

This goes on to note:

If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

And finally, it concludes:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

This means that the pixel unit is an absolute length, but its length can change depending on whether the device applies implementation i or implementation ii from the first part I've quoted here.

An absolute length, as defined by the CSS Values and Units Module, is simply a length which is “anchored to some physical measurement”. The physical measurement will either be their actual physical length or the length derived by the reference pixel.

The same section of the specificaiton also says:

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. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

96px will not always equal 1 real-life inch.

like image 152
James Donnelly Avatar answered Oct 25 '22 23:10

James Donnelly


No, px is a relative unit. As pixel size is different for different screen sizes they (maybe W3C) set a standard for px as a relative unit.

like image 26
Abhishek Zirota Avatar answered Oct 26 '22 01:10

Abhishek Zirota