This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
faq [2018/10/04 12:09] – astearns | faq [2021/02/26 09:55] – Add "real physical units" tabatkins | ||
---|---|---|---|
Line 292: | Line 292: | ||
=== Question === | === Question === | ||
- | The named colors in CSS are fairly arbitrary and incomplete. Could we add a better system of named colors? Or could we add these specific | + | Can we add new named colors |
Line 307: | Line 307: | ||
=== References === | === References === | ||
- | https:// | + | * https:// |
+ | * https:// | ||
+ | |||
+ | |||
+ | ===== Real Physical Lengths ===== | ||
+ | |||
+ | === Question === | ||
+ | |||
+ | A ' | ||
+ | |||
+ | === Answer === | ||
+ | |||
+ | Currently, no. | ||
+ | |||
+ | This has been tried in the past, in several variants. Originally, all the "real world" units were meant to be accurate physical measurements. | ||
+ | |||
+ | Later, Mozilla attempted to address this again, by adding a separate " | ||
+ | |||
+ | The overall conclusion is that trying to present accurate real-world units is a failure; browsers can't do it reliably, and authors often misuse them anyway, giving users a bad experience. | ||
+ | |||
+ | === Workarounds === | ||
+ | |||
+ | There' | ||
+ | |||
+ | 1. Have a calibration page, where you ask the user to measure the distance between two lines that are some CSS distance apart (say, 10cm), and input the value they get. | ||
+ | 2. Use this to find the scaling factor necessary for that screen (CSS length divided by user-provided length), and store it locally (via localStorage, | ||
+ | 3. On the pages where you need the accurate length, fetch it from local storage, and set a '' | ||
+ | 4. Anywhere you use a length that needs to be accurate, instead of '' | ||
+ | |||
+ | This is a robust and minimal scheme that is guaranteed to give correct results on a given device, and "fails open" - if the user hasn't calibrated yet, or has cleared their local storage, etc, the '' | ||
+ | |||
+ | (Note: a common follow-up request is to bake this unit-scale-factor into a CSS property that auto-scales all lengths for you. You don't actually want this - calibrating a ruler shouldn' | ||
+ | |||
+ | === References === | ||
+ | |||
+ | * https:// |