12 ms·

So you are saying you would want one physical square inch on a phone to be the exact same size one square inch on a projector screen? I have been designing and

So you are saying you would want one physical square inch on a phone to be the exact same size one square inch on a projector screen? I have been designing and building interfaces for a couple decades and I have been down the "relative size" path and learned not to do that the hard way. There lies nothing but tears. Sizing to pixels, for some reason, results in the most predictable and consistent appearances.

zlynx 9y ago
But pixels are a lie! Pixels are being scaled all over the place these days, up to 300-400%. The only reason pixels appear to "work" is that everyone uses pixels, so the software has to be written to lie about pixels. And so they continue to seem to work and people continue to use them to size things. They might as well just call them "screen fractions" or something, because they sure aren't pixels.
- thomastjeffery 9y ago
  You are confusing pixels with points. Points are being scaled, and a simple workaround to accomplish that is often duplication of pixels.
  - cbhl 9y ago
    On HiDPI mobile devices, pixels aren't real pixels. They're actually treated like points -- a pixel in CSS ends up being something like 3-ish real device pixels, plus or minus, depending on the device.
    - c-smile 9y ago
      Windows: pixels are pixels. Some systems there (e.g. WPF) use also dip units (Device Independent Pixel, 1/96in == 1px in twisted CSS terms). And that's how it should be done in CSS form the very beginning. MacOS/iOS uses screen units. Each such unit is of N physical pixels. Where N is a number obtained by [ nsscreen backingScaleFactor] function for particular screen (monitor).
      - thomastjeffery 9y ago
        > Device Independent Pixel, 1/96in == 1px That's a point. 12pt font means 12 points.
        int_19h 9y ago
        A point is 1/72". A dip is 1/96".
- 6nf 9y ago
  Even points are a lie now. I open a PDF on my computer, and the PDF viewer might scale it to fit the window, and the OS might scale it based on my preferences, and maybe my monitor is a projector which means the OS has no idea how big the viewing area actually is.
- bshacklett 9y ago
  They're not necessarily true pixels anymore, but the effect of using px as the unit of measurement hasn't really changed. You're controlling more physical pixels, but a similar size of the screen.
- lstamour 9y ago
  Actually, the W3C calls it a "reference pixel": https://www.w3.org/TR/css-values-3/#reference-pixel https://www.w3.org/TR/css-values-3/#reference-pixel -- other units: https://www.w3.org/TR/css-values-3/#lengths https://www.w3.org/TR/css-values-3/#lengths
mjevans 9y ago
I believe they are saying that there should be several types of sizes: a: Relative sizes (to bounding boxes/etc) b: Exact physical sizes (E.G. points which are 1/72nd inch) c: Precise device sizes (REAL pixels, not compatibility pixels) It might be nice to have a way of specifying the minimum and maximum size among those three values, and a priority for fulfilling the min / max request ordering.
- IgorPartola 9y ago
  Why do you need precise pixel sizes? What if I gave you a 3000 PPI screen? Would you really care to make any feature of your UI be the size of one pixel? Wouldn’t “smallest visible solid dot” as covered by (b) suffice?
  - sillysaurus3 9y ago
    Yes, as a gamedev and as someone who has tried to do a lot of fanciness regarding human visual perception, I would love to have the ability to specify "use the absolute smallest, device-sized pixel value." It's a special case, sure. But those special cases suddenly enable what was previously impossible.
    - IgorPartola 9y ago
      Again, even if you are looking at a 3k/6k/9k PPI display? Even if a single pixel is in no way visible? Isn't there a limit beyond which you don't care?
      - sillysaurus3 9y ago
        "not visible" is a very tricky thing in human perception. I'd love a way to subtly mess with someone's eye. And not for trolling purposes. It matters in art.
  - mjevans 9y ago
    Me? I don't need that. HOWEVER, I can understand why someone else might. Mostly these cases revolve around implementing something in program instead of with basic standard features. Some standards even recognize that more complex decisions need to be made and allow for 'shaders' that determine the outcome instead of basic operations. Providing low level primitives in a responsible interface allows for the corner cases to be approached with nuance and care instead of glaring presence of omission.
recursive 9y ago
> So you are saying you would want one physical square inch on a phone to be the exact same size one square inch on a projector screen? If they're not the same, then they're not inches.
- wlesieutre 9y ago
  Right, the argument is that if you want some arbitrary sizes you should get a new unit for it, not inconsistently use an existing unit to mean something that it doesn't. The current system of pts or inches varying by context would be like if an oven manufacturer said "Well, 60°F is pretty warm, and 90°F is downright hot, so we'll just recontextualize those numbers for our oven gauge. Bake cookies for 10 minutes at 80 degrees. Unless you're using some other oven that scaled temperatures differently, in which case bake them at some other temperature instead ¯\_(ツ)_/¯ One could argue that you really are using inches, it's just that everything ever displayed on a screen has an implied "not to scale" note with it, but I don't think that's a particularly useful argument. Heck, if you're editing something in MS Office it'll show you an 8.5x11 page with a scale meter. Set it to 100% and surely that's to scale. Nope, 100% of some other totally arbitrary scale. That's what you wanted, yeah?
  - mannykannot 9y ago
    This is why working around a problem rather than fixing it is rarely a good idea.
  - lstamour 9y ago
    In regards to Microsoft Word, it might be exactly to scale if your monitor happens to be a multiple of 96 DPI: https://www.anandtech.com/show/11050/the-microsoft-surface-studio-review/4 https://www.anandtech.com/show/11050/the-microsoft-surface-s...
    - mark-r 9y ago
      Microsoft Word sizes everything for the printer. What you see on screen is merely an approximation. This actually makes sense, since printers will be more consistent than screens.
deleted 9y ago
[deleted]
hackits 9y ago
Most high DPI web-browser/software run into the main problem that the world runs on <= 96dpi screens. So for the act of sainty they all throw their arms up and say, `We assume the device is 96dpi and we scale a pixel to that`. Consider it this way. When you had a A4/A3 size paper it it natural to talk in point, inches because your A4/A3 sheet of paper doesn't suddenly change to A5/A6, so you're all-ways designing for a fixed size.
- chipotle_coyote 9y ago
  Most high DPI web-browser/software run into the main problem that the world runs on <= 96dpi screens. I'm typing this on a 27″ iMac 5K with 218 dpi resolution. My smartphone (an iPhone 6) has 325 dpi; my 9.7″ iPad has 264 dpi. And you don't even have to use "retina" high-DPI displays to beat 96 dpi. The older 27″ displays, with 2560×1440 resolution, have 109 dpi when you work out the math; the MacBook Air 11″ has 135 dpi. I think it's fair to say the world ran, past tense, on screens that were 96 dpi and under. But that's just not a very good assumption to make anymore.
  - hackits 9y ago
    I think it's fair to say you're wrong. https://www.w3.org/TR/css3-values/#px https://www.w3.org/TR/css3-values/#px 1px = 1/96th of 1in There is a A LOT of content being built, have been build by designers for 96dpi. The reason why it isn't a concern for you is because that standard exists, and your webkit knows you're on a 218 dpi monitor and scales to the px unit.
tytytytytytytyt 9y ago
I prefer 3/4 square inch square inches on the phone and 1.3 square inch square inches on a projector.
mark-r 9y ago
Sizing to pixels works great when the device manufacturers all use approximately the same ratio of resolution to viewing distance. The problem with that approach is that it doesn't allow for nicer, high-resolution displays. Sizing to pixels is vital when using low-resolution displays, since any scaling will be unacceptably blurry. Apple's approach with their Retina displays was brilliant - make the high-res screens an integer multiple of the low-res ones. That made the scaling issues much easier to deal with. The tragedy is with Windows. Microsoft has long emphasized font hinting, which results in sharper display fonts. But it means that the font metrics don't scale linearly with the resolution. Apps that weren't tested at anything but the default resolution would invariably have rendering issues, so nobody used oddball resolutions. Because nobody used high resolutions, the app makers didn't feel the need to test them. Chicken/egg problem. It has taken far too long to overcome this.
- omegote 9y ago
  > Apple's approach with their Retina displays was brilliant Brilliant? Rather "lazy". They jeopardized the entire screen resolution spectrum introducing non-standard resolutions just to fit their vision, producing a new set of problems on its own.
  - colejohnson66 9y ago
    Unless I’m missing something, if your programs are designed properly, non standard resolutions shouldn’t be a problem; Your app layout should flow to fill the space.
- dcposch 9y ago
  The web has already solved this. HiDPI screens just get a multiplication factor, where a 1px by 1px <div> shows up as 2x2 or even 3x3 physical pixels. So the CSS px unit is a bit of a hack, but ultimately works well. Stuff sized in px stays readable across a super retina iPhone X, an older screen, a projector, or a stadium Jumbotron. That's more than can be said of physical pixel or distance units.
  - 9y ago
mwilliaams 9y ago
In web design, at least, there are plenty of relative-size units available to create a scalable, responsive design. Em, rem, %, vw, and vh are all very useful for this. In my designs I almost exclusively use these units, with little to no issues.
dcposch 9y ago
I think the article falls into a pattern of web developers demanding too much control. Fine grained control belongs to the users. The browser is a User Agent, after all. Users may have their computer configured to display text bigger or smaller than normal. They may have blocked ads. They may have disabled autoplaying video. They might be using Flux or Reader Mode. They might be sitting on a couch, projecting a 6ft image onto a wall. Just size your stuff in px. How many millimeters that works out to is up to the user.
bluGill 9y ago
At 100% zoom yes. I should be able to take a ruler to my drawing and verify that it is exactly one physical inch. (to the limits of the display). This implies the projector somehow has feedback to the computer some sort of scale factor depending on how large the screen is. When I'm doing CAD, or paper layout this is very important. Note that an inch (or more likely cm) is rarely what I want. Most of my use case is text where physical measurements are not important. When I'm writing code I want text to scale to be readable. This means web browsers and many other editors should not have any concept of points/inches/cm.

zlynx 9y ago

But pixels are a lie! Pixels are being scaled all over the place these days, up to 300-400%. The only reason pixels appear to "work" is that everyone uses pixels, so the software has to be written to lie about pixels. And so they continue to seem to work and people continue to use them to size things. They might as well just call them "screen fractions" or something, because they sure aren't pixels.

thomastjeffery 9y ago
You are confusing pixels with points. Points are being scaled, and a simple workaround to accomplish that is often duplication of pixels.
- cbhl 9y ago
  On HiDPI mobile devices, pixels aren't real pixels. They're actually treated like points -- a pixel in CSS ends up being something like 3-ish real device pixels, plus or minus, depending on the device.
  - c-smile 9y ago
    Windows: pixels are pixels. Some systems there (e.g. WPF) use also dip units (Device Independent Pixel, 1/96in == 1px in twisted CSS terms). And that's how it should be done in CSS form the very beginning. MacOS/iOS uses screen units. Each such unit is of N physical pixels. Where N is a number obtained by [ nsscreen backingScaleFactor] function for particular screen (monitor).
    - thomastjeffery 9y ago
      > Device Independent Pixel, 1/96in == 1px That's a point. 12pt font means 12 points.
      - int_19h 9y ago
        A point is 1/72". A dip is 1/96".
6nf 9y ago
Even points are a lie now. I open a PDF on my computer, and the PDF viewer might scale it to fit the window, and the OS might scale it based on my preferences, and maybe my monitor is a projector which means the OS has no idea how big the viewing area actually is.
bshacklett 9y ago
They're not necessarily true pixels anymore, but the effect of using px as the unit of measurement hasn't really changed. You're controlling more physical pixels, but a similar size of the screen.
lstamour 9y ago
Actually, the W3C calls it a "reference pixel": https://www.w3.org/TR/css-values-3/#reference-pixel https://www.w3.org/TR/css-values-3/#reference-pixel -- other units: https://www.w3.org/TR/css-values-3/#lengths https://www.w3.org/TR/css-values-3/#lengths

mjevans 9y ago

I believe they are saying that there should be several types of sizes: a: Relative sizes (to bounding boxes/etc) b: Exact physical sizes (E.G. points which are 1/72nd inch) c: Precise device sizes (REAL pixels, not compatibility pixels) It might be nice to have a way of specifying the minimum and maximum size among those three values, and a priority for fulfilling the min / max request ordering.

IgorPartola 9y ago
Why do you need precise pixel sizes? What if I gave you a 3000 PPI screen? Would you really care to make any feature of your UI be the size of one pixel? Wouldn’t “smallest visible solid dot” as covered by (b) suffice?
- sillysaurus3 9y ago
  Yes, as a gamedev and as someone who has tried to do a lot of fanciness regarding human visual perception, I would love to have the ability to specify "use the absolute smallest, device-sized pixel value." It's a special case, sure. But those special cases suddenly enable what was previously impossible.
  - IgorPartola 9y ago
    Again, even if you are looking at a 3k/6k/9k PPI display? Even if a single pixel is in no way visible? Isn't there a limit beyond which you don't care?
    - sillysaurus3 9y ago
      "not visible" is a very tricky thing in human perception. I'd love a way to subtly mess with someone's eye. And not for trolling purposes. It matters in art.
- mjevans 9y ago
  Me? I don't need that. HOWEVER, I can understand why someone else might. Mostly these cases revolve around implementing something in program instead of with basic standard features. Some standards even recognize that more complex decisions need to be made and allow for 'shaders' that determine the outcome instead of basic operations. Providing low level primitives in a responsible interface allows for the corner cases to be approached with nuance and care instead of glaring presence of omission.

recursive 9y ago

> So you are saying you would want one physical square inch on a phone to be the exact same size one square inch on a projector screen? If they're not the same, then they're not inches.

wlesieutre 9y ago
Right, the argument is that if you want some arbitrary sizes you should get a new unit for it, not inconsistently use an existing unit to mean something that it doesn't. The current system of pts or inches varying by context would be like if an oven manufacturer said "Well, 60°F is pretty warm, and 90°F is downright hot, so we'll just recontextualize those numbers for our oven gauge. Bake cookies for 10 minutes at 80 degrees. Unless you're using some other oven that scaled temperatures differently, in which case bake them at some other temperature instead ¯\_(ツ)_/¯ One could argue that you really are using inches, it's just that everything ever displayed on a screen has an implied "not to scale" note with it, but I don't think that's a particularly useful argument. Heck, if you're editing something in MS Office it'll show you an 8.5x11 page with a scale meter. Set it to 100% and surely that's to scale. Nope, 100% of some other totally arbitrary scale. That's what you wanted, yeah?
- mannykannot 9y ago
  This is why working around a problem rather than fixing it is rarely a good idea.
- lstamour 9y ago
  In regards to Microsoft Word, it might be exactly to scale if your monitor happens to be a multiple of 96 DPI: https://www.anandtech.com/show/11050/the-microsoft-surface-studio-review/4 https://www.anandtech.com/show/11050/the-microsoft-surface-s...
  - mark-r 9y ago
    Microsoft Word sizes everything for the printer. What you see on screen is merely an approximation. This actually makes sense, since printers will be more consistent than screens.

deleted 9y ago

[deleted]

hackits 9y ago

Most high DPI web-browser/software run into the main problem that the world runs on <= 96dpi screens. So for the act of sainty they all throw their arms up and say, `We assume the device is 96dpi and we scale a pixel to that`. Consider it this way. When you had a A4/A3 size paper it it natural to talk in point, inches because your A4/A3 sheet of paper doesn't suddenly change to A5/A6, so you're all-ways designing for a fixed size.

chipotle_coyote 9y ago
Most high DPI web-browser/software run into the main problem that the world runs on <= 96dpi screens. I'm typing this on a 27″ iMac 5K with 218 dpi resolution. My smartphone (an iPhone 6) has 325 dpi; my 9.7″ iPad has 264 dpi. And you don't even have to use "retina" high-DPI displays to beat 96 dpi. The older 27″ displays, with 2560×1440 resolution, have 109 dpi when you work out the math; the MacBook Air 11″ has 135 dpi. I think it's fair to say the world ran, past tense, on screens that were 96 dpi and under. But that's just not a very good assumption to make anymore.
- hackits 9y ago
  I think it's fair to say you're wrong. https://www.w3.org/TR/css3-values/#px https://www.w3.org/TR/css3-values/#px 1px = 1/96th of 1in There is a A LOT of content being built, have been build by designers for 96dpi. The reason why it isn't a concern for you is because that standard exists, and your webkit knows you're on a 218 dpi monitor and scales to the px unit.

tytytytytytytyt 9y ago

I prefer 3/4 square inch square inches on the phone and 1.3 square inch square inches on a projector.

mark-r 9y ago

Sizing to pixels works great when the device manufacturers all use approximately the same ratio of resolution to viewing distance. The problem with that approach is that it doesn't allow for nicer, high-resolution displays. Sizing to pixels is vital when using low-resolution displays, since any scaling will be unacceptably blurry. Apple's approach with their Retina displays was brilliant - make the high-res screens an integer multiple of the low-res ones. That made the scaling issues much easier to deal with. The tragedy is with Windows. Microsoft has long emphasized font hinting, which results in sharper display fonts. But it means that the font metrics don't scale linearly with the resolution. Apps that weren't tested at anything but the default resolution would invariably have rendering issues, so nobody used oddball resolutions. Because nobody used high resolutions, the app makers didn't feel the need to test them. Chicken/egg problem. It has taken far too long to overcome this.

omegote 9y ago
> Apple's approach with their Retina displays was brilliant Brilliant? Rather "lazy". They jeopardized the entire screen resolution spectrum introducing non-standard resolutions just to fit their vision, producing a new set of problems on its own.
- colejohnson66 9y ago
  Unless I’m missing something, if your programs are designed properly, non standard resolutions shouldn’t be a problem; Your app layout should flow to fill the space.
dcposch 9y ago
The web has already solved this. HiDPI screens just get a multiplication factor, where a 1px by 1px <div> shows up as 2x2 or even 3x3 physical pixels. So the CSS px unit is a bit of a hack, but ultimately works well. Stuff sized in px stays readable across a super retina iPhone X, an older screen, a projector, or a stadium Jumbotron. That's more than can be said of physical pixel or distance units.
- 9y ago

mwilliaams 9y ago

In web design, at least, there are plenty of relative-size units available to create a scalable, responsive design. Em, rem, %, vw, and vh are all very useful for this. In my designs I almost exclusively use these units, with little to no issues.

dcposch 9y ago

I think the article falls into a pattern of web developers demanding too much control. Fine grained control belongs to the users. The browser is a User Agent, after all. Users may have their computer configured to display text bigger or smaller than normal. They may have blocked ads. They may have disabled autoplaying video. They might be using Flux or Reader Mode. They might be sitting on a couch, projecting a 6ft image onto a wall. Just size your stuff in px. How many millimeters that works out to is up to the user.

bluGill 9y ago

At 100% zoom yes. I should be able to take a ruler to my drawing and verify that it is exactly one physical inch. (to the limits of the display). This implies the projector somehow has feedback to the computer some sort of scale factor depending on how large the screen is. When I'm doing CAD, or paper layout this is very important. Note that an inch (or more likely cm) is rarely what I want. Most of my use case is text where physical measurements are not important. When I'm writing code I want text to scale to be readable. This means web browsers and many other editors should not have any concept of points/inches/cm.