Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-values] Median and Mode functions to select a single value from a set #905

Closed
Crissov opened this issue Jan 13, 2017 · 2 comments
Closed
Labels
css-values-4 Current Work

Comments

@Crissov
Copy link
Contributor

Crissov commented Jan 13, 2017

In #544, minimum and maximum functions have been accepted for CSS Values Level 4.
Both functions select a single computed value from a set of 1 to N values (which may be results of nested calc() expressions). This cannot be achieved with Level 3 calc() syntax.

  • min (minimum/minimal) chooses the smallest computed value.
  • max (maximum/maximal) chooses the largest computed value.
min(100px 10em 1vw)
max(100px 10em 1vw)
    
min(100px 10px 1px) /* = 1px */
max(100px 10px 1px) /* = 100px */

There are at least two other useful statistic measures that work the same:

  • mode chooses the most frequently occuring computed value.
  • median chooses the computed value with the same number of smaller and larger sibling values.
mod(100px 10em 1vw)
med(100px 10em 1vw)

mod(100px 10px 10px) /* = 10px */
med(100px 10px 1px) /* = 10px */

Mode

The mode function may benefit from an optional value to specify the precision, i.e. tolerance limits, when comparing (and returning) computed values.

mod(100px 10em 1vw, 1pt)

This could effectively be reused as a ‘round to nearest multiple’ function. Such a static factor is called a module or modulus, e. g. in architecture and design.

mod(101px, 1pt) /* = 76pt ≈ 101.33px */
mod(100px, 1pt) /* = 75pt = 100px */
mod(99px, 1pt) /* = 74pt ≈ 98.67px */
mod(10px, 1pt) /* = 8pt ≈ 10.67px */
mod(1px, 1pt) /* = 1pt ≈ 1.33px */

The specification must also say what to do if no computed value occurs more often than another. It may fall back to the arithmetic mean of all equally frequent values.

mod(100px 10px) /* = 55px? */

Median

The median function needs to be specified for an even number of values as well, i.e. when there is one above and one below but none at the center of the set. It may fall back to the arithmetic mean of the two values closest to the true median.

med(100px 10px) /* = 55px? */

The median could also be specified for a reduced set where redundant entries were collapsed into a unique one beforehand:

med(1000px 100px 10px 5px 1px)   /* = 10px */
med(1000px 100px 10px 10px 1px)  /* = 10px or: */  med(1000px 100px 10px 1px) /* = 55px */
med(1000px 100px 100px 10px 1px) /* = 100px or: */ med(1000px 100px 10px 1px) /* = 55px */
med(1000px 500px 100px 10px 1px) /* = 100px */

If the values closest to the center do not occur equally often, the median could be weighted instead.

med(1000px 100px 10px 1px)   /* = 110px/2 = 55px */
med(1000px 100px 10px 10px)  /* = 120px/3 = 40px? */
med(100px 100px 10px 1px)    /* = 210px/3 = 70px? */
@fantasai fantasai added the css-values-4 Current Work label Mar 30, 2017
@fantasai
Copy link
Collaborator

Closing for lack of use cases. Please do not file any issues without meaningful and reasonably-common use cases.

@Crissov
Copy link
Contributor Author

Crissov commented Sep 5, 2017

I introduced round to nearest multiple as a side effect of mod, i.e. module instead of mode, but you could make it the main feature as well. It happens quite often that designers specify a grid using one unit but some live calculations have to use a different unit. It would also help to avoid different rounding behavior in implementations that can lead to perfect alignment in one browser but not another.

@Crissov Crissov changed the title [css-values] Functions to select one value from a set: med(), mod() [css-values] Median and Mode functions to select a single value from a set Feb 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-values-4 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants
  NODES
Community 2
os 17
text 1
Users 1
web 1