14 ms·

I have mixed feelings about this. I get the point about touch: i.e. the button should have a fixed size in proportion to your finger. However in other scenari

I have mixed feelings about this. I get the point about touch: i.e. the button should have a fixed size in proportion to your finger. However in other scenarios I am not sure size should be constant. In most cases, you have to factor in the distance to the viewer. This is, probably "projection angle in the retina" is a more useful invariant. For example, in a big TV that is far from you, you want things to be bigger than in a monitor, that is closer. And in a laptop, you probably want it even smaller. "Design by pixel" takes this into account somewhat indirectly because most display are designed to have their pixel density in inverse proportion to the size of the display, which is also inversely correlated to the expected usage distance. Sometimes technology changes our expectations of definitions and things become small, until designs catch up with the new expected pixel density. We have worked around this problem with pixel density factors on retina/QHD. I agree that all this in the is a evolutionary "hack". But I am not sure that the proposed solution, even though more rational sounding, actually makes things better.

colechristensen 9y ago
An inch should be an inch. A pixel should be a pixel. A point should be a point which is defined as 1/72 inch. Those are all physical measurements, meant for the surface of the screen. If you design with them, it means you're designing with the screen size in mind. It's often wrong to design with those measurements. There are relative sizes too. %, em (current size of font), and measurements relative to viewports. That's what designers use very often.
- protonfish 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? 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
- mark-r 9y ago
  Em may be a relative size, but it's based on a font whose size is specified in points or pixels. Thus it's indirectly a physical measurement too. Although points are formally defined as a physical size, they really only make sense in their historical context - the printed page. I think the W3C definitions make the most sense when relating measurements to displays. You are encouraged to use definitions that are flexible but consistent with the context of your display. https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
  - zAy0LfpBZLC8mAC 9y ago
    > Em may be a relative size, but it's based on a font whose size is specified in points or pixels. Thus it's indirectly a physical measurement too. A size specification that can be correctly converted into any amount of meters at all is most definitely not a physical measurement. A unit that has a conversion factor to the corresponding SI unit for the respective dimenion that can be chosen completely arbitrarily is certainly not a phyiscal unit of measurement.
    - mark-r 9y ago
      While the conversion from points/pixels to em is not fixed, it is fixed for any particular font. As the pixel and point sizes change, so will the em - they're directly proportional except for any font hinting your browser might apply.
      - zAy0LfpBZLC8mAC 9y ago
        In other words: They are not a physical size measurement. The definition of physical units is precisely that they are relative to only one unambiguous standard which relates it to all other dimensions of the universe. Distances, for example, are related to time. As such, one meter, as a unit of distance, is the distance that light in a vacuum travels in 1/299792458th of a second. A unit that does not have such a fixed relation to time is not a unit of distance by definition. So, unless increasing the font size in your browser also slows down time, the em is not a unit of physical size. There are many more perfectly fine ways to specify how to derive a physical size relative to a given situation, but that does not make that specification a physical size itself.
- pasta 9y ago
  Fun thing is: pixels don't have a size. They are just 2d locations (with a color assigned). But most devices relate them to screen pixels. And therefore scale coded pixels to the screen density. High density devices can do this in multiple ways: every screen pixel is a coded pixel, or scale the coded pixels so the user can 'see' them. That's why using pixels in code work because the device is scaling them to a screen size that is nice for the user.
  - dotancohen 9y ago
    > Fun thing is: pixels don't have a size. They are just 2d locations (with a color assigned). Sometimes pixels are not even 2d locations. I've seen experimental hardware running hexagonal and other unusual pixel configurations. Vector images look absolutely amazing, even at low resolution, however certain font types (formats, not typefaces) look better than others and some look downright terrible.
- kevin_thibedeau 9y ago
  > An inch should be an inch. A pixel should be a pixel. We had that in Win95. You could scale the display for 1:1 dimensional matching with an on screen ruler. Then Microsoft found out how broken everything became if you scaled the display to a non-default value because invariably some GUI elements were built around hard coded pixel dimensions that couldn't adapt when the fonts weren't rendered the same as the developer's machine. So they hid all of that machinery in '98. Guess what? People are still designing web apps today with px units and the same scaling breakage persists with browsers jumping through all sorts of hoops to hide it.
  - int_19h 9y ago
    That machinery is still there, and has always been - it's exactly what happens when you muck around with "make everything smaller/bigger" in display settings in Control Panel. The problem, rather was that the OS didn't really do much to implement it. That ruler was basically just surfaced to the apps as an API to query, and then they were supposed to apply their own calculations as needed. One exception was the API used to create dialogs (but not other types of windows) from Win32 resoures - CreateDialog etc - these measure widget sizes in "dialog units", which is "an average width and height of characters in a system font"; the idea being that this way, the size of the widgets would naturally scale to the size of the text labels, according to DPI. However, many (arguably, most) Win32 don't use CreateDialog even for actual dialogs, and many frameworks in the past didn't respect the DPI setting at all.
munificent 9y ago
> In most cases, you have to factor in the distance to > the viewer. This is, probably "projection angle in the > retina" is a more useful invariant. That's actually exactly what CSS specifies: "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)." Of course this means "pixel" is kind of a misnomer, but at least the semantics of the unit are about what you want.
- gsnedders 9y ago
  Note that there's slightly more choice here than just that: 1px may be either (1 physical real-world inch on the output medium)/96 or set related to the reference pixel. (Though in CSS 1in always equals 96px, etc.) (See https://drafts.csswg.org/css-values-4/#absolute-lengths https://drafts.csswg.org/css-values-4/#absolute-lengths)
- c-smile 9y ago
  What is written in CSS specification may work only if CSS has any means to measure distance of observer from display surface. Like @media distance(1m) {} Otherwise it is just a good wish like "hope you have normal eyesight". The only information that is available to CSS is that it gets rendered on some media. And so 100mm shall be 100mm measured by the ruler on that media surface. Monitor or printer. Dot. No other options.
  - kijin 9y ago
    Phones already have proximity sensors and facial recognition. We're just not using them to scale pixels yet. But for most intents and purposes, it's enough to assume a "typical" distance for the type of device in question. People with bad eyesight are free to place the device closer to their eyes, zoom in, or adjust a system setting that makes everything look larger.
  - zAy0LfpBZLC8mAC 9y ago
    > And so 100mm shall be 100mm measured by the ruler on that media surface. Monitor or printer. Dot. No other options. So, you connect a projector to your laptop, point it at a 20 m screen, open a web page, and then ... the browser has to scale the web page to a width of 10 pixels without any options to adjust things for the user?
kybernetikos 9y ago
I've been experimenting with the concept of using subtended angles on the retina. For devices that can sense the distance to the user, we'd use that, otherwise you make an assumption based on the kind of device. That way you should be able to get sizes that appear roughly the same size regardless of whether they are on a huge screen far away or a small screen up close.
captainmuon 9y ago
TVs and projectors should be an exception. They are always mentioned as an objection when this comes up, but I think there is no problem to limit resolution to certain devices where it makes sense. "Non-technical" people don't understand why 1cm isn't the same on screen or printed out. They hold a piece of paper to the screen and are frustated. That 12pt means something different on Mac than on Windows is also confusing - and the exact handling changes between apps. I think Word makes it so that the printed out size is the same (it has to be), but the displayed size is smaller. On my Mac, "100%" zoom doesn't fit a piece of paper, but "135%" does. On Windows, it is about "115%" for me. Other apps have subtly different behavior. It would be really great for multimonitor setup if stuff would have the same physical size on each screen (and while we are at it, color! Even a very basic per-model color calibration would be better than nothing). It would be really useful if you could display something at an exact scale on a tablet, and maybe hold a real ruler up to it. I understand why this stuff is hard, I've worked a bit on related things myself. And to be honest, most people won't probably notice. But I still think it would be a good usability and ergonomics improvement.
- masklinn 9y ago
  > TVs and projectors should be an exception. No, they are just extremes making the point unmistakably clear, if you decide they're exceptions you just refuse to accept the issue exists at all. The exact same issue exists going from a smartphone to a tablet to a laptop or desktop computer, just to a lower degree. If you're not solving the issue such that it works from a smartphone to a projector, you're not actually solving it you're just providing one more bandaid, of which we already have plenty.
  - captainmuon 9y ago
    The difference is, on a projector I want the content to be blown up. That's the whole purpose. On the other hand, I want text on monitors to look like printed out, and hung up. Real paper doesn't scale with viewing distance. Instead, there is foreshortening - stuff a bit further away looks smaller, but I know it is the same size. It doesn't mean all text should be the same size ever - on the contrary. If I sit further away, I want to choose a larger font size or greater magnification. All I want is, when dealing with physicality - stuff to print out, or stuff behind a touchscreen that pretends to be real - I want to be able to set a slider to "100%", and put a ruler or comparison document up to the screen, and have it match perfectly. I want stuff on dual monitors and large tablets to be the same size by default. I needed these features already several times this week: I printed out a document just to get a better impression of how the font size looks on paper. I also had a scan of an architectural drawing on milimeter paper (1cm = 1m), and wanted to compare it with a paper blueprint - if it was the same scale, I could just hold a ruler against it.
nothis 9y ago
IMO this is easily fixable by making any display output its exact pixel size as some sort of universal standard. For example, 1 pixel = 0.0147 cm. And vice versa. Together with the screen diagonal size (and maybe some flag whether it's a tablet or desktop, etc), you have all the information needed. You could perfectly adjust websites for different use. On a Mac (probably elsewhere, too), you can open an A4 print PDF and have it exactly the same size as the output, to the millimeter. That is so helpful.
- mjevans 9y ago
  Such a standard exists, but it measures the total display area across the entire width and height of the display. Thus the pixel to pixel gaps become negligible compared to the imprecision of humans interpreting illuminated pixels. EDID parameters 20 and 21... https://en.wikipedia.org/wiki/Extended_Display_Identification_Data#EDID_1.4_data_format https://en.wikipedia.org/wiki/Extended_Display_Identificatio...

colechristensen 9y ago

An inch should be an inch. A pixel should be a pixel. A point should be a point which is defined as 1/72 inch. Those are all physical measurements, meant for the surface of the screen. If you design with them, it means you're designing with the screen size in mind. It's often wrong to design with those measurements. There are relative sizes too. %, em (current size of font), and measurements relative to viewports. That's what designers use very often.

protonfish 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? 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
mark-r 9y ago
Em may be a relative size, but it's based on a font whose size is specified in points or pixels. Thus it's indirectly a physical measurement too. Although points are formally defined as a physical size, they really only make sense in their historical context - the printed page. I think the W3C definitions make the most sense when relating measurements to displays. You are encouraged to use definitions that are flexible but consistent with the context of your display. https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
- zAy0LfpBZLC8mAC 9y ago
  > Em may be a relative size, but it's based on a font whose size is specified in points or pixels. Thus it's indirectly a physical measurement too. A size specification that can be correctly converted into any amount of meters at all is most definitely not a physical measurement. A unit that has a conversion factor to the corresponding SI unit for the respective dimenion that can be chosen completely arbitrarily is certainly not a phyiscal unit of measurement.
  - mark-r 9y ago
    While the conversion from points/pixels to em is not fixed, it is fixed for any particular font. As the pixel and point sizes change, so will the em - they're directly proportional except for any font hinting your browser might apply.
    - zAy0LfpBZLC8mAC 9y ago
      In other words: They are not a physical size measurement. The definition of physical units is precisely that they are relative to only one unambiguous standard which relates it to all other dimensions of the universe. Distances, for example, are related to time. As such, one meter, as a unit of distance, is the distance that light in a vacuum travels in 1/299792458th of a second. A unit that does not have such a fixed relation to time is not a unit of distance by definition. So, unless increasing the font size in your browser also slows down time, the em is not a unit of physical size. There are many more perfectly fine ways to specify how to derive a physical size relative to a given situation, but that does not make that specification a physical size itself.
pasta 9y ago
Fun thing is: pixels don't have a size. They are just 2d locations (with a color assigned). But most devices relate them to screen pixels. And therefore scale coded pixels to the screen density. High density devices can do this in multiple ways: every screen pixel is a coded pixel, or scale the coded pixels so the user can 'see' them. That's why using pixels in code work because the device is scaling them to a screen size that is nice for the user.
- dotancohen 9y ago
  > Fun thing is: pixels don't have a size. They are just 2d locations (with a color assigned). Sometimes pixels are not even 2d locations. I've seen experimental hardware running hexagonal and other unusual pixel configurations. Vector images look absolutely amazing, even at low resolution, however certain font types (formats, not typefaces) look better than others and some look downright terrible.
kevin_thibedeau 9y ago
> An inch should be an inch. A pixel should be a pixel. We had that in Win95. You could scale the display for 1:1 dimensional matching with an on screen ruler. Then Microsoft found out how broken everything became if you scaled the display to a non-default value because invariably some GUI elements were built around hard coded pixel dimensions that couldn't adapt when the fonts weren't rendered the same as the developer's machine. So they hid all of that machinery in '98. Guess what? People are still designing web apps today with px units and the same scaling breakage persists with browsers jumping through all sorts of hoops to hide it.
- int_19h 9y ago
  That machinery is still there, and has always been - it's exactly what happens when you muck around with "make everything smaller/bigger" in display settings in Control Panel. The problem, rather was that the OS didn't really do much to implement it. That ruler was basically just surfaced to the apps as an API to query, and then they were supposed to apply their own calculations as needed. One exception was the API used to create dialogs (but not other types of windows) from Win32 resoures - CreateDialog etc - these measure widget sizes in "dialog units", which is "an average width and height of characters in a system font"; the idea being that this way, the size of the widgets would naturally scale to the size of the text labels, according to DPI. However, many (arguably, most) Win32 don't use CreateDialog even for actual dialogs, and many frameworks in the past didn't respect the DPI setting at all.

munificent 9y ago

> In most cases, you have to factor in the distance to > the viewer. This is, probably "projection angle in the > retina" is a more useful invariant. That's actually exactly what CSS specifies: "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)." Of course this means "pixel" is kind of a misnomer, but at least the semantics of the unit are about what you want.

gsnedders 9y ago
Note that there's slightly more choice here than just that: 1px may be either (1 physical real-world inch on the output medium)/96 or set related to the reference pixel. (Though in CSS 1in always equals 96px, etc.) (See https://drafts.csswg.org/css-values-4/#absolute-lengths https://drafts.csswg.org/css-values-4/#absolute-lengths)
c-smile 9y ago
What is written in CSS specification may work only if CSS has any means to measure distance of observer from display surface. Like @media distance(1m) {} Otherwise it is just a good wish like "hope you have normal eyesight". The only information that is available to CSS is that it gets rendered on some media. And so 100mm shall be 100mm measured by the ruler on that media surface. Monitor or printer. Dot. No other options.
- kijin 9y ago
  Phones already have proximity sensors and facial recognition. We're just not using them to scale pixels yet. But for most intents and purposes, it's enough to assume a "typical" distance for the type of device in question. People with bad eyesight are free to place the device closer to their eyes, zoom in, or adjust a system setting that makes everything look larger.
- zAy0LfpBZLC8mAC 9y ago
  > And so 100mm shall be 100mm measured by the ruler on that media surface. Monitor or printer. Dot. No other options. So, you connect a projector to your laptop, point it at a 20 m screen, open a web page, and then ... the browser has to scale the web page to a width of 10 pixels without any options to adjust things for the user?

kybernetikos 9y ago

I've been experimenting with the concept of using subtended angles on the retina. For devices that can sense the distance to the user, we'd use that, otherwise you make an assumption based on the kind of device. That way you should be able to get sizes that appear roughly the same size regardless of whether they are on a huge screen far away or a small screen up close.

captainmuon 9y ago

TVs and projectors should be an exception. They are always mentioned as an objection when this comes up, but I think there is no problem to limit resolution to certain devices where it makes sense. "Non-technical" people don't understand why 1cm isn't the same on screen or printed out. They hold a piece of paper to the screen and are frustated. That 12pt means something different on Mac than on Windows is also confusing - and the exact handling changes between apps. I think Word makes it so that the printed out size is the same (it has to be), but the displayed size is smaller. On my Mac, "100%" zoom doesn't fit a piece of paper, but "135%" does. On Windows, it is about "115%" for me. Other apps have subtly different behavior. It would be really great for multimonitor setup if stuff would have the same physical size on each screen (and while we are at it, color! Even a very basic per-model color calibration would be better than nothing). It would be really useful if you could display something at an exact scale on a tablet, and maybe hold a real ruler up to it. I understand why this stuff is hard, I've worked a bit on related things myself. And to be honest, most people won't probably notice. But I still think it would be a good usability and ergonomics improvement.

masklinn 9y ago
> TVs and projectors should be an exception. No, they are just extremes making the point unmistakably clear, if you decide they're exceptions you just refuse to accept the issue exists at all. The exact same issue exists going from a smartphone to a tablet to a laptop or desktop computer, just to a lower degree. If you're not solving the issue such that it works from a smartphone to a projector, you're not actually solving it you're just providing one more bandaid, of which we already have plenty.
- captainmuon 9y ago
  The difference is, on a projector I want the content to be blown up. That's the whole purpose. On the other hand, I want text on monitors to look like printed out, and hung up. Real paper doesn't scale with viewing distance. Instead, there is foreshortening - stuff a bit further away looks smaller, but I know it is the same size. It doesn't mean all text should be the same size ever - on the contrary. If I sit further away, I want to choose a larger font size or greater magnification. All I want is, when dealing with physicality - stuff to print out, or stuff behind a touchscreen that pretends to be real - I want to be able to set a slider to "100%", and put a ruler or comparison document up to the screen, and have it match perfectly. I want stuff on dual monitors and large tablets to be the same size by default. I needed these features already several times this week: I printed out a document just to get a better impression of how the font size looks on paper. I also had a scan of an architectural drawing on milimeter paper (1cm = 1m), and wanted to compare it with a paper blueprint - if it was the same scale, I could just hold a ruler against it.

nothis 9y ago

IMO this is easily fixable by making any display output its exact pixel size as some sort of universal standard. For example, 1 pixel = 0.0147 cm. And vice versa. Together with the screen diagonal size (and maybe some flag whether it's a tablet or desktop, etc), you have all the information needed. You could perfectly adjust websites for different use. On a Mac (probably elsewhere, too), you can open an A4 print PDF and have it exactly the same size as the output, to the millimeter. That is so helpful.

mjevans 9y ago
Such a standard exists, but it measures the total display area across the entire width and height of the display. Thus the pixel to pixel gaps become negligible compared to the imprecision of humans interpreting illuminated pixels. EDID parameters 20 and 21... https://en.wikipedia.org/wiki/Extended_Display_Identification_Data#EDID_1.4_data_format https://en.wikipedia.org/wiki/Extended_Display_Identificatio...