A calculated column width, animated position, or displayed price can contain fractions that do not fit the visual result you want. Rounding selects a usable value: a whole pixel, a fixed decimal display, a whole-number percentage, or a chosen multiple such as 10px. The important choice is direction, especially for negative values. section 2.6 section 2.6.4
Table 2.6 JavaScript rounding methods
| Function |
Behavior |
Examples |
Results |
|---|---|---|---|
|
|
Rounds n to the nearest whole number |
|
|
|
|
Rounds n down (toward -∞) |
|
|
|
|
Rounds n up (toward +∞) |
|
|
|
|
Removes the fractional part of n |
|
|
Use the direction named by the method: floor goes toward −∞, ceil toward +∞, trunc removes the fraction, and round chooses the nearest integer. section 2.6.1
`Math.round()` is nearest-value rounding, but an exact `.5` tie goes toward +∞: `Math.round(2.5)` is `3`, while `Math.round(-2.5)` is `-2`. This differs from the common shortcut “always away from zero.” `Math.floor(-2.3)` becomes `-3`, whereas `Math.ceil(-2.3)` becomes `-2`. section 2.6.1 section 2.8
Choose a rounding result that matches the UI job:
- Round calculated pixel widths when fractional values could create blurry edges. section 2.6.1 section 2.6.4
- Round a scale-derived font size to a fixed number of decimal places with `toFixed(2)` and convert it back with `parseFloat()` when a number is needed. section 2.6.4
- Format currency with two displayed decimals using `amount.toFixed(2)`, including whole amounts. section 2.6.4
- Display progress as a whole percentage with `Math.round((current / total) * 100)`. section 2.6.4
Snap CSS values to a design interval
CSS `round(strategy, number, interval)` rounds directly in a declaration. With a 10px interval, `round(down, 26px, 10px)` produces the lower multiple, while `round(up, 26px, 10px)` produces the higher one. `nearest` is the default when omitted; `to-zero` moves a negative value toward zero. The same strategies correspond to JavaScript `Math.floor()`, `Math.round()`, `Math.trunc()`, and `Math.ceil()`. section 3.2.4
z-index: round(4.7); #1
width: round(down, 26px, 10px); #2
width: round(nearest, 26px, 10px); #3
margin: round(to-zero, -26px, 10px); #4
width: round(up, 26px, 10px); #5
width: round(27px, 10px); #6
opacity: round(0.78, 0.25); #7
Compare whole-number, interval, negative-margin, and opacity rounding in CSS declarations. section 3.2.4
Rounding changes a value; it does not repair every floating-point comparison. Regular JavaScript numbers approximate many decimals, so values such as `0.1 + 0.2` may not equal the expected decimal exactly. When comparison is the problem, test whether the difference is smaller than `Number.EPSILON`; when presentation is the problem, round or format the result deliberately. section 2.3.1 section 2.3.2
