[csswg-drafts] [css-values] Add sign() math function (#4673)

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

== [css-values] Add sign() math function ==
Can we add the analogous of the ECMAScript `Math.sign()`? That is
 - `sign(x)` is `1` if `x > +0`
 - `sign(+0)` is `+0`
 - `sign(-0)` is `-0`
 - `sign(x)` is `-1` if `x < -0`
 - `sign(NaN)` is `NaN`

For non-zero values it can be achieved with `x / hypot(x)` or `clamp(-1, x / 0, 1)`, but these are NaN for zero.

I think `sign()` can be very useful given that CSS doesn't have conditionals (#3455).

For example:
```css
width: calc(if (100vw > 100px) then (1em) else (1lh));
```
is not possible, but with `sign()` I could use 
```css
--cond: sign(max((100vw - 100px) / 1px, 0));
width: calc(1em * var(--cond) + 1lh * (1 - var(--cond)));
```

Or #2513 is discussing a `round()` function that rounds to the nearest, or upwards in case of tie. So `round(2.5)` would be 3 and `round(-2.5)` would be -2. But what if in case of tie I want to round towards 0, or away from zero? It's very simple with `sign()`:

```css
round(-hypot(x)) * sign(-x) /* round towards 0 in case of tie */
round(hypot(x)) * sign(x) /* round away from 0 in case of tie */
```

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

Received on Wednesday, 15 January 2020 13:11:28 UTC