[css-values] Add round()/floor()/ceil() functions · Issue #2513 · w3c/csswg-drafts (original) (raw)

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 */