4 ms·

I think the most offensive thing here is that 6.2% of people use inches as a unit of measure in their css. The thought of 𝚋𝚘𝚛𝚍𝚎𝚛: 𝟶.𝟸𝚒𝚗 𝚋𝚕𝚊𝚌𝚔; s

by jjcm 7y ago

I think the most offensive thing here is that 6.2% of people use inches as a unit of measure in their css. The thought of 𝚋𝚘𝚛𝚍𝚎𝚛: 𝟶.𝟸𝚒𝚗 𝚋𝚕𝚊𝚌𝚔; sitting in someone's css is terrifying.

blowski 7y ago
I've used inches when doing print-based CSS, although I'd be surprised if that accounts for all of it.
jstimpfle 7y ago
As someone who hasn't done CSS in a while, with a 4K monitor and the knowledge how old pixel-based desktop apps look on it (VERY small), what's wrong with inches? From my own non-CSS based graphics experience, the only problem with layouts specified in absolute sizes is that small lines look really bad on standard (<100dpi) monitors if not aligned to the physical screen pixels. (Not saying that's not bad!)
- jjcm 7y ago
  Inches in css aren't in any way related to physical inches. CSS has no knowledge of your physical screen dimensions. Rather an inch was defined early on in the history of css as "1 inch in pixels of a 17 inch screen at 1280x1024 resolution" This happens to be 96.42 pixels, which rounded down to 96. So not only is it an obscure unit, it's also a misleading one. On your 4k monitor 96 pixels is more than likely not an inch (unless your monitor is slightly over 42 inches), so it wont solve your small app problem in any form, it will just make things more obscure. In addition to this, you'll also end up with many subpixel values. While this wont matter for 𝚋𝚘𝚛𝚍𝚎𝚛 in the example I posted above (as border always snaps to the nearest dp unit), it will create blurry effects on lower DPI screens for other css rules that do respect subpixel values (i.e. 𝚋𝚘𝚡-𝚜𝚑𝚊𝚍𝚘𝚠: 𝟶 𝟶 𝟶 𝟶.𝟸𝚒𝚗 #𝟶𝟶𝟶; will create a blurred border effect).
  - ChrisSD 7y ago
    That said, Mozilla did use to have the experimental `mozmm` unit that attempted to accurate represent the millimetre. However it was removed a few versions back.
  - majewsky 7y ago
    > On your 4k monitor 96 pixels is more than likely not an inch (unless your monitor is slightly over 42 inches) That's good to know. My 4k monitor, coincidentally, is about 40.5 inches, so CSS inches are displayed almost correctly.
- Permagate 7y ago
  One other reason is probably because inches is not a universal unit of measurement for computer graphic. Especially for someone who comes from country where inch is never used (like me), you need to mentally calculate the value to something more familiar.
- danShumway 7y ago
  On the web, inches don't actually work based on physical inches, they're just another pixel measurement. But assuming they did work on physical inches, they still wouldn't capture how close the device was going to be to your face, what the pixel density/brightness was, anything like that. For the most part, use percentage, `em`, or `rem`. This is based off the the font size, which is more accessible (your app will still look good if someone with poor eyesight changes the font size). It'll also mean your app works well with fractional scaling out of the box. I believe that most desktop-level graphics frameworks like GTK support `em` units. At the very least, on the web, avoid pixel measurement in most cases. It turns out that device font-size is a good measurement to capture most of the variable parts of user experience -- a pixel dense device that's held close to your eyes will have a small font size, a high resolution monitor that's farther away will have a larger font size -- and `em` will work great in both cases.
  - jstimpfle 7y ago
    > But assuming they did work on physical inches, they still wouldn't capture how close the device was going to be to your face At least the inch is a unit whose physical size, by the name, you could assume to not change when screen resolution changes. And also, DPI (or just the physical monitor size) is usually something the user can configure in the operating system - to account for viewing distance or personal preferences.
edflsafoiewq 7y ago
That's 19.2px.
jmull 7y ago
I'm dying to know: what's wrong with inches in CSS?
- looeee 7y ago
  I'm gonna guess that they have very little to do with inches in the real world, and will in fact display at different lengths on different screens.
  - jmull 7y ago
    That's true, but that issue isn't specific to CSS inches. Pixels aren't pixels, points aren't points, etc. It's not even an HTML/browser issue. There's a general problem with knowing in software the real-life physical size or length of something displayed on screen. The calibration information available isn't generally reliable, though I think people are paying more attention these days with the growing interest in AR.
Nicksil 7y ago
It's likely being used for _print_ css.

by jjcm 7y ago

blowski 7y ago

I've used inches when doing print-based CSS, although I'd be surprised if that accounts for all of it.

jstimpfle 7y ago

As someone who hasn't done CSS in a while, with a 4K monitor and the knowledge how old pixel-based desktop apps look on it (VERY small), what's wrong with inches? From my own non-CSS based graphics experience, the only problem with layouts specified in absolute sizes is that small lines look really bad on standard (<100dpi) monitors if not aligned to the physical screen pixels. (Not saying that's not bad!)

jjcm 7y ago
Inches in css aren't in any way related to physical inches. CSS has no knowledge of your physical screen dimensions. Rather an inch was defined early on in the history of css as "1 inch in pixels of a 17 inch screen at 1280x1024 resolution" This happens to be 96.42 pixels, which rounded down to 96. So not only is it an obscure unit, it's also a misleading one. On your 4k monitor 96 pixels is more than likely not an inch (unless your monitor is slightly over 42 inches), so it wont solve your small app problem in any form, it will just make things more obscure. In addition to this, you'll also end up with many subpixel values. While this wont matter for 𝚋𝚘𝚛𝚍𝚎𝚛 in the example I posted above (as border always snaps to the nearest dp unit), it will create blurry effects on lower DPI screens for other css rules that do respect subpixel values (i.e. 𝚋𝚘𝚡-𝚜𝚑𝚊𝚍𝚘𝚠: 𝟶 𝟶 𝟶 𝟶.𝟸𝚒𝚗 #𝟶𝟶𝟶; will create a blurred border effect).
- ChrisSD 7y ago
  That said, Mozilla did use to have the experimental `mozmm` unit that attempted to accurate represent the millimetre. However it was removed a few versions back.
- majewsky 7y ago
  > On your 4k monitor 96 pixels is more than likely not an inch (unless your monitor is slightly over 42 inches) That's good to know. My 4k monitor, coincidentally, is about 40.5 inches, so CSS inches are displayed almost correctly.
Permagate 7y ago
One other reason is probably because inches is not a universal unit of measurement for computer graphic. Especially for someone who comes from country where inch is never used (like me), you need to mentally calculate the value to something more familiar.
danShumway 7y ago
On the web, inches don't actually work based on physical inches, they're just another pixel measurement. But assuming they did work on physical inches, they still wouldn't capture how close the device was going to be to your face, what the pixel density/brightness was, anything like that. For the most part, use percentage, `em`, or `rem`. This is based off the the font size, which is more accessible (your app will still look good if someone with poor eyesight changes the font size). It'll also mean your app works well with fractional scaling out of the box. I believe that most desktop-level graphics frameworks like GTK support `em` units. At the very least, on the web, avoid pixel measurement in most cases. It turns out that device font-size is a good measurement to capture most of the variable parts of user experience -- a pixel dense device that's held close to your eyes will have a small font size, a high resolution monitor that's farther away will have a larger font size -- and `em` will work great in both cases.
- jstimpfle 7y ago
  > But assuming they did work on physical inches, they still wouldn't capture how close the device was going to be to your face At least the inch is a unit whose physical size, by the name, you could assume to not change when screen resolution changes. And also, DPI (or just the physical monitor size) is usually something the user can configure in the operating system - to account for viewing distance or personal preferences.

edflsafoiewq 7y ago

That's 19.2px.

jmull 7y ago

I'm dying to know: what's wrong with inches in CSS?

looeee 7y ago
I'm gonna guess that they have very little to do with inches in the real world, and will in fact display at different lengths on different screens.
- jmull 7y ago
  That's true, but that issue isn't specific to CSS inches. Pixels aren't pixels, points aren't points, etc. It's not even an HTML/browser issue. There's a general problem with knowing in software the real-life physical size or length of something displayed on screen. The calibration information available isn't generally reliable, though I think people are paying more attention these days with the growing interest in AR.

Nicksil 7y ago

It's likely being used for _print_ css.