This question presumes: device-pixels are absolute (fixed, not relative to anything).
Following reading this article,
My device (MacBook Pro 2019) has a pixel ratio of 2 (2 device pixels in every CSS pixel when zoom-level 100%; calculated by .devicePixelRatio). At 100% zoom-level, CSS pixels (as measured with .innerWidth) are the same as device pixels (as measured with screen.width & Cmd + Shift + 4 + click). I was expecting CSS pixels to be half the value of device pixels.
Why does MDN say CSS pixel is an absolute value when zooming in actually increases the size of a CSS pixel (by increasing the amount of device pixels it equals to)? Why is this in MDN?
In your case the scaling is done at the OS level, so everything will "lie" because your OS is set to lie to every applications, including the browsers.
The window.screen.width value will be the one reported by your OS, but in your system preferences, it says that you want the resolution of your display to be set to half of its real resolution, that's what you'll get.
So even these values are not device pixels, but some kind of CSS pixels (well window.screen.width is really 'CSS pixels', the one from the ScreenShot app isn't).
However, while "lying" about the number of pixels, it correctly exposes the pixel density (number of physical pixel used per px). That's what you'll have in window.devicePixelRatio when the browser doesn't apply any zoom by itself. Unfortunately, we don't know when the browser applies such a zoom, so as web-devs, we can't know the OS pixel density, nor the true resolution of the device.
As for the second point, I will assume you asked why MDN says CSS pixels are absolute rather than relative as written in your question.
This doesn't mean that a CSS pixel will always have the same physical dimension outputted (which is impossible btw, think of a video-projector), it's in contrast with relative lengths like %, em, vw, etc. which are relative to an other length.
CSS pixels are absolute in that they don't rely on any other length, even though the physical output may vary.
Related
In the srcset attribute of img element in html, we can specify either the width or the pixel density of each source. We use w to specify width and x to specify pixel density. I have some questions about w and x.
Does 500w mean that the width of the image is 500 pixels? If so, why is it w and not px, as used when in the size attribute?
Does 1x means a pixel density of 72pixels/inch
Why does an image have pixel density? I thought pixel density means the number of pixels within a physical length/space. For example, the number of pixels per inch. But a digital image doesn't occupy a physical length/space, it only occupies a number of pixels. So what does the pixel density of a digital image mean?...This is my guess, please tell me if I'm right: An image only occupies a number of pixels, but it could have been intended for a physical length. For example, an image of a button of 144 pixels width was intended to occupy a physical space of 1 inch. Therefore, it was intended for a device of 2x. We tell the browser this by specifying 2x in the srcset attribute. To sum up, the pixel density means the pixel density of the system the image is intended for.
#1. The 'w' value that appears to the right of each file listed in the srcset attribute of the <img> tag is known as the "w descriptor." The value of each 'w' descriptor is the intrinsic width, in pixels, of the file the 'w' descriptor is associated with. "Intrinsic width" means the native width of the image when it is was originally created or the last time its width changed. You can view a file's intrinsic width in Photoshop or the Windows 10 Photo Viewer (click the three-dot menu "..." and select File Info). "px" is not used to describe intrinsic width because it is used to describe various other types of image widths. The 'w' descriptor describes a specific type of image width that is measured in pixels - intrinsic width - and is used only with the srcset attribute of the <img> tag.
#2. "1x" does NOT mean a pixel density of 72 pixels per inch. That's because pixel density is NOT device resolution. Pixel density is the ratio of browser image width in pixels (known as "CSS pixels") to the native pixel width of the device's display screen. Pixel density has nothing to do with device resolution.
#3. An image does NOT have pixel density. It has only two types of width measurements - both in pixels. One width measure is the width the browser is displaying the image at. The other width measure is the intrinsic width of the image (see #1). For example, suppose I have an image whose intrinsic width is 800px wide. Also suppose that the browser is displaying the image at 650px wide. These two measures are not related in any way (this is NOT pixel density!) - they're just two different ways an image can be viewed which results in two different width measurements.
I've answered your questions directly, without any other context or explanation, and I'm certain that you are scratching your head saying, "That didn't help!" That's the exact same reaction I had when I first started to educate myself about how inline images (images that are specified with the <img> tag in HTML) are selected and displayed by browsers. I suggest you read this post to begin to gain a thorough understanding about how inline images are specified in HTML markup and how browsers select the appropriate image from the srcset attribute of the <img> tag. You can expect several weeks of study before this topic comes into sharp focus. And when you've finished mastering inline images, background images are waiting for you to master with a completely different set of rules. :>)
I'm doing some graphics (in Javascript, if that's relevant), and I know you can size fonts with pt, px, %, etc. When looking up what px means, every site seems to have the same vague answer -- the size of the font in pixels. I'm wondering what exactly px represents. For example, if I have 20px, will 20 pixels represent the height of a capital A, a small e, a lowercase g or the difference between the bottom of the g and the top of the A? (I'm assuming it's the size of the A, but I just want to double check).
Furthermore, px is apparently relative to the view size. So if I do a fillRect(1,1,20,20), will this be the size of a capital A at 20px, or does the font size change on different devices independent of the graphics?
For example, if I have 20px, will 20 pixels represent the height of a
capital A, a small e, a lowercase g or the difference between the
bottom of the g and the top of the A?
None of them. It represent an abstract object called the "em-square". The height of capitals, the width of the glyphs, and various other measures of the glyphs are then defined in each font as proportional to the em-square. But often, none of the measures you see is exactly equal to 1 em-square size, or in your case, equal to 20px.
per http://www.unitconversion.org/typography/pixels-x-to-centimeters-conversion.html
10 pixels are 0.264583333 CM.
other than that, it can very depending on your font and the display resolution of the screen.
No, the size of one pixel px is not officially defined in a technical way.
Although I cannot tell you who exactly defines the value, if it's the pc-manufacturer or who it is and whether w3 guidelines tell these specifying parties to measure it from a certain distance depending on screen size, But the most specific and most helpful description of the "magic" px unit is
1 px equals the smallest width to make a line visible on the specific device.
given that the watching user stands at a device relative reasonable distance.
(see Official w3 Info about the px unit).
My end goal is to display an image of the same exact size on every screen (yes, I really do need this for something).
I started reading about how to get the user's screen size here - and the answer seems to be that it's impossible (without calling an API which attempts to guess the actual device based on some params).
I then remembered that css has physical dimension units for sizing elements and decided to test on my screen. I set dimensions like so:
<div style = "background-color:black; height: 5in; width: 3in;"></div>
and then put a physical 3"x 5" (7.6cm x 12.7cm) flashcard against the screen.
It was significantly off in size.
Fun note - setting size in mm was ridiculously off - I expected to get the same results as with inches.
With that said, is there a way to do what I need?
In CSS, one inch does not equal one physical inch. It equals 96px.
This section of the spec may help you:
5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units
The absolute length units are fixed in relation to each other and
anchored to some physical measurement.
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
From my experience up to now the pixel size is something very relevant and intepreted differently based on many factors. My question is how do pixels work in html pages.
For example we can set the width and height of an image:
<img src="lalala.jpg" width="100px;" height="100px;">
What does 100 pixels actually mean?
How are the 100 pixels translated on screen?
How are the 100 pixels translated if on print papper?
To be more specific. If I set the image size to 100px then is it going to be the same size in inches on different screen sizes ? Ad if so..Is it going to be the same size if I print the same page while using a different screen size?
In HTML, pixel lengths of the height and width attributes are controlled by CSS. In some instances, these are refereed to as "CSS pixels". HTML itself does not provide a definition for what a pixel should represent (thus why I added the css tag into your question).
CSS itself has its own Units and Values documentation which defines the Pixel in its section on Absolute Lengths:
5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They 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 definition
---- ----------
‘cm’ centimeters
‘mm’ millimeters
‘in’ inches; 1in is equal to 2.54cm
‘px’ pixels; 1px is equal to 1/96th of 1in
‘pt’ points; 1pt is equal to 1/72nd of 1in
‘pc’ picas; 1pc is equal to 12pt
100 pixels is equal to roughly 1.041in, which itself is equal to roughly 2.65cm.
I'm not going to answer the further questions you've asked about different monitors and printing as this would make my answer incredibly long and dull. If you want to find out these answers yourself, a good place to start is in the same document I've already linked, which goes into detail about the Reference Pixel. Values in CSS are based upon a value of 96dpi (which means that 96 pixels on a monitor which has a pixel dencity of 96dpi will be equal to one inch if you were to measure it with a ruler).
Because every screen has diferent pixel size HTML/CSS or whatever software language is going to be made never gonna match the physical pixel size.
To calculate pixel size you need Hardware machine language not software.
This question already has answers here:
What is the difference between px, em and ex?
(4 answers)
Closed 1 year ago.
What is the difference between px and em?
Meet the Units
“Ems” (em): The “em” is a scalable unit that is used in web document
media. An em is equal to the current font-size, for instance, if the
font-size of the document is 12pt, 1em is equal to 12pt. Ems are
scalable in nature, so 2em would equal 24pt, .5em would equal 6pt,
etc. Ems are becoming increasingly popular in web documents due to
scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen
media (i.e. to be read on the computer screen). One pixel is equal
to one dot on the computer screen (the smallest division of your
screen’s resolution). Many web designers use pixel units in web
documents in order to produce a pixel-perfect representation of
their site as it is rendered in the browser. One problem with the
pixel unit is that it does not scale upward for visually-impaired
readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything
that is to be printed on paper, etc.). One point is equal to 1/72 of
an inch. Points are much like pixels, in that they are fixed-size
units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a
few fundamental differences. First and foremost, the current
font-size is equal to 100% (i.e. 12pt = 100%). While using the
percent unit, your text remains fully scalable for mobile devices
and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
Info taken from http://kyleschaeffer.com
1 em = take font size from your Document font-size. It is relative in nature.
100% = take size also from document font size.
General
12pt=1em=100%=16px
In Best Practise Use % because it is relative to your width, it will automatic adjust device to device.