Re: [csswg-drafts] [css-values] Proposal for a 'progress' function to calculate progress between two <length> values (#7268)

I agree this should be easier.

Some thoughts that might help with naming/syntax:

Both `mix()` and the proposed `progress()` are basically linear range mapping operations. To take the example above:

```css
--progress: progress(100vw, 375px, 1920px);
font-size: mix(var(--progress), 24px, 32px);
```
`progress(100vw, 375px, 1920px)` maps the [375px, 1920px] range to the [0, 1] range, and `mix(var(--progress), 24px, 32px)` maps the [0, 1] range to the [24px, 32px] range.

If we have ad hoc functions like that, I think it should somehow be obvious from naming that one is the inverse of the other: `mix()` interpolates (takes a percentage and gets you the corresponding value), and `progress()` does the opposite (takes a value and gets you the corresponding percentage). While I like `progress()` as a name, with the proposed naming they seem like entirely separate things. Perhaps `mix-reverse()` or `mix-inv()` or something? (tempted to suggest `xim()` and duck 🤣)

But what if we exposed the *actual* range mapping operation? We could have a `map()` function that takes two *ranges* and a value and maps the value from one range to the other. This would basically give us the result above in one fell swoop, without the intermediate percentage:

```css
font-size: map(100vw in 375px to 1920px into 24px to 32px);
```
or

```css
font-size: map(100vw in [375px, 1920px] to [24px, 32px]);
```

or something (syntax TBB). 
Perhaps we could even have shortcuts to facilitate the common case where you want percentages as input or output.

Note that these could also be stored in variables to be reused for every conversion:

```css
:root {
 --page-widths: [375px, 1920px];
}
/* ... */
font-size: map(100vw in var(--page-widths) to [24px, 32px]);
```

or even:

```css
:root {
 --page-width-progress: 100vw in [375px, 1920px];
}
/* ... */
font-size: map(var(--page-width-progress) to [24px, 32px]);
```

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7268#issuecomment-1184273154 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 14 July 2022 10:27:51 UTC