Skip to content

[css-values] Add round()/floor()/ceil() functions #2513

@Crissov

Description

@Crissov

Graphic designers often specify a rectangular grid using a fixed module, i.e. a relative or absolute length that other measures are an integer multiple or subdivision of. In stylesheets, often several length units are used for different purposes, e.g. font size in pt, line height in em, border width in px, margins in mm, widths in %, heights in vh and so on. To make them match up nicely and to assure the same results across different implementations, authors would need some method to influence or even control rounding behavior. Instead of classic round(value, precision), floor(value) and ceil(value) functions found in many programming languages and spreadsheet applications for floating point numbers, I believe CSS users would best be served by a round to nearest multiple function, for values usually come with a unit. For the reasons given in #905 I would call it mod().

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions