[csswg-drafts] [css-values] [css-fonts-4] Native map() function in CSS

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

== [css-values] [css-fonts-4] Native map() function in CSS  ==
CSS is in need of a native map() function. This is increasingly the 
case with what I am reading about variable fonts in CSS. A map 
function is the glue that could bring it all together.

In many cases variable font properties are meant to adjusted according
 to the viewport resolution. We can currently do this for some 
properties with calc(). i.e.

```
font-size: calc(16px + 8 * ((100vw - 400px) / 400));
```

The above example will map a font-size between 18px and 24px when the 
viewport is between 400 and 800px. This has already proven to be very 
useful but it has limitations. It's linear, not interoperable, it only
 works with some unit-types, it doesn't work with real numbers or 
percentages and it's also somewhat difficult to understand. 

I'm concerned that CSS 4 `font-variation-settings` values won't be 
able to be transitioned in this way which for me is one of the main 
use-cases.

I'll give some detail of how I think it could\should work:
 
A map() function could be used as component value. Similar to calc() 
it could be used wherever <length>, <frequency>, <angle>, <time>, 
<percentage>, <number>, or <integer> values are allowed. But equally 
it could work for <color> values and any other values that can be 
interpolated or animated.

One possible syntax of a map() function is:

map(<min-viewport>, <min-value>, <max-viewport>, <max-value>, 
[<easing>])

The map() function interpolates between the min-value and the 
max-value, across the specified viewport range and according to the 
easing function. The default easing function should be linear, and 
accepts CSS `transition-timing-function` values.

Here are some examples of how a map() could be used with 
`font-variation-settings`:
```
.example {
  font-variation-settings: "wght" map(600px, 0.5, 1000px, 0.7);
}
.example {
  font-variation-settings: "wght" map(40em, 0.5, 80em, 0.7, ease-in);
}
.example {
  font-variation-settings: "wght" map(600px, 0.5, 1000px, 0.7, 
cubic-bezier(0.250, 0.250, 0.750, 0.750) );
}
```


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

Received on Saturday, 8 October 2016 18:09:06 UTC