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

johannesodland has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Proposal for a 'progress' function to calculate progress between two <length> values ==


The proposal is to add a new function to [css-values-4](https://drafts.csswg.org/css-values-4) that calculates the progress between two `<length>` values in percent. The new function could be used together with the new [`mix`](https://drafts.csswg.org/css-values-4/#interpolate) function to improve readability of fluid sizes.

The syntax of the progress functions could be as follows:

```
progress(<input-length> ','  <min-length> ',' <max-length>)
```
All arguments are `<length>` values, while the return value would be a `<percentage>` value representing the progress of the input between the min and max values.  Progress would be clamped between `0%` and `100%`.

The function could then be used together with `mix()` to calculate fluid sizes:
```
--progress: progress(100vw, 375px, 1920px);
font-size: mix(var(--progress), 24px, 32px);
```

This would work well with container query units as well
```
--progress: progress(100qw, 200px, 800px);
font-size: mix(--progress, 18px, 22px);
```

The proposed function is not new functionality, but would be syntactic sugar for 
```
clamp(0%, calc(100% * ((<input-length> - <min-length>) / (<max-length> - <min-length>))), 100%)
```

Name to be bikeshedded.

### Motivation
Fluid typography has been around for years, but the css necessary to achieve it is hard to create and read. 

[The `clamp()` function makes it possible to create fluid typography with less bloat](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/): Example copied from article above:

```
font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem);
```

It is still complicated to calculate the slope and intercept values necessary to create a fluid type that scales from a minimum to a maximum viewport size. It is not possible understand the min and max viewport sizes from reading the notation.

Preprocessors or other tools can be used to calculate the values, but this does not improve the readability.

The new [mix](https://drafts.csswg.org/css-values-4/#interpolate) funcion could let us interpolate between two font-sizes, as long as we have a progress argument:

```
--progress: progress(100vw, 375px, 1920px);
font-size: mix(var(--progress), 24px, 32px);
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7268 using your GitHub account


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

Received on Wednesday, 11 May 2022 13:28:44 UTC