[css-values] New length unit as a fractional part of rem

[Crissov]

@romainmenke wrote in #9293

Some samples from real CSS I have access to :

animation: MAP_LOADING_ANIMATION 1.4925373134328357s cubic-bezier(0, 0.2, 0.8, 1) infinite;
animation-delay: -0.7462686567164178s;
line-height: 1.307692307;
padding-top: 237.037037%;
height: calc(4em * 1.57142857);
padding-bottom: 68.115942%;
letter-spacing: 0.046875rem;
height: 117.1875px;
padding-top: 117.1875%;
letter-spacing: 0.046875rem;
letter-spacing: 0.038125rem;
letter-spacing: 0.054375rem;
letter-spacing: 0.038125rem;
letter-spacing: 0.114375rem;
letter-spacing: 0.163125rem;
letter-spacing: 0.070625rem;
letter-spacing: 0.054375rem;
letter-spacing: 0.040625rem;
max-width: 48.4375rem;
max-width: 30.9375rem;
width: calc(100% - 10.6875rem);
max-width: 59.8125rem;
width: 10.9375rem;
width: 14.1875rem;
width: 10.9375rem;
padding-bottom: 42.8571%;
padding: 0.59375rem 1.25rem;
letter-spacing: 0.03375rem;
letter-spacing: 0.03625rem;
letter-spacing: 0.03125rem;
grid-template-columns: repeat(auto-fill, 10.6875rem);
min-width: 10.6875rem;
width: 10.6875rem;
max-width: 23.4375rem;
width: 10.3125rem;
max-width: 20.9375rem;
max-width: 26.0625rem;
letter-spacing: 0.03125rem;
--width-mobile-nav-xsmall: 19.6875rem;
top: 66.6667vw;
letter-spacing: -0.03125rem;
width: 14.3125rem;
width: 11.5625rem;
letter-spacing: 0.04375rem;
letter-spacing: -0.03125rem;
letter-spacing: -0.09375rem;
letter-spacing: 0.02125rem;
letter-spacing: -0.03125rem;
letter-spacing: -0.09375rem;
letter-spacing: 0.04375rem;
letter-spacing: 0.05625rem;
letter-spacing: 0.03375rem;
letter-spacing: 0.02625rem;
padding: 0.78125rem 3.125rem;
margin-bottom: 2.15625rem;
padding-bottom: 10.3125rem;
margin-bottom: 3.45625rem;
margin-bottom: 2.45625rem;
padding: 0.78125rem 3.125rem;
margin-top: 0.78125rem;
width: 27.3125rem;
padding-top: 1.15625rem;
margin-bottom: 13.3125rem;
bottom: calc(0.90625rem + 1.6875rem);
padding-top: 1.71875rem;
padding-bottom: 2.03125rem;
padding-top: 1.90625rem;
padding-top: 23.0625rem;
margin-top: 10.9375rem;
margin-bottom: 10.9375rem;
grid-template-columns: 28.25rem 32.6875rem;
padding-top: 12.8125rem;
min-height: 10.9375rem;
min-height: 13.4375rem;
top: calc(50% - 0.03125rem);
grid-auto-rows: calc(72.1875vw + 3.125rem);
min-height: calc(72.1875vw + 3.125rem);
top: calc(50% - 0.03125rem);
grid-auto-rows: calc(72.1875vw + 3.125rem);
min-height: calc(72.1875vw + 3.125rem);
top: calc(50% - 0.03125rem);
grid-auto-rows: calc(72.1875vw + 3.125rem);
min-height: calc(72.1875vw + 3.125rem);
min-width: 11.5625rem;

There are a lot of rem lengths in this sample, many of which are obviously the results of converting pixel values with a ratio of 16 px per rem. All of them can be expressed by px values with two digits after the decimal point, or less. Assuming this is indeed a frequent way to use root-ems, there could be value in introducing a new unit which is a subdivision of rem corresponding 1:1 or 100:1 to default pixels, e.g.:

• 16rp = 1rem, 1rp ≈ 1px
• 1600rx = 1rem, 1rx ≈ 0.01px

[romainmenke]

The one issue I see with this is that this new unit would only make sense as long as designers/developers keep using 16px as the base value for typography.

If this mutates over time to 20px or another value, the rp/rx units wouldn't make sense any more.

---

out of scope thought :

I am not sure why 16px is still used so much other than "we always did it this way".
Are there distinct advantages to using 16px?

---

Edit :

Another important note about the data above is that it was generated by looking at ±50 websites we (a web agency) created and taking the values that contains the longest numbers in number-like tokens.

Because division by 16 results in longer numbers this specific case is overrepresented in this data.

In practice we use these more like design tokens and the large fractional part is something we only see once, when declaring the length values that will be used.

:root {
  --space-8--px: 8px;
  --space-8--rem: 0.5rem;
  --space-16--px: 16px;
  --space-16--rem: 1rem;
}

[1jj]

@romainmenke wrote in #9293
...
padding: 0.78125rem 3.125rem;
...
There are a lot of rem lengths in this sample, many of which are obviously the results of converting pixel values with a ratio of 16 px per rem. All of them can be expressed by px values with two digits after the decimal point, or less. Assuming this is indeed a frequent way to use root-ems, there could be value in introducing a new unit which is a subdivision of rem corresponding 1:1 or 100:1 to default pixels, e.g.:

• 16rp = 1rem, 1rp ≈ 1px

• 1600rx = 1rem, 1rx ≈ 0.01px

No please!
I do this sort of thing quite often (to a much lesser extent than in this example), but I don't want a new length unit for that.

You can help yourself elsewhere if you care about the readability of your code:

 :root { font-size: 0.625em }   /* 10px */  /* or "calc(1em/1.6)" if you prefer */
 body  { font-size: 1.6rem }    /* 16px */
 .foo  { padding: 1.25rem 5rem }   /* 12.5px  50px */

(even this is overkill for me personally)

j.j.

[Loirooriol]

I don't think new units are needed, I think https://drafts.csswg.org/css-variables-2/#variable-units should be used instead:

:root { --rp: calc(1rem / 16) }
foo { padding: 20--rp } /* 1.25rem */

[fantasai]

Closing as wontfix per above commentary and the fact that it wouldn't add any new functionality and only a very, very slight benefit to authors at the cost of implementation, testing, educational materials, and the memory space of developers.

[Crissov]

Solving this with #7379 is fine with me since I don’t need this myself anyway.