I have the following situation:
div {
width: calc((100% / 11) - 9.09px);
}
In the context, 100% = 1440px, and 9.09px is generated in mathematics with sass.
The results is: 94.55px, because calc rounds it up, but I need 94.54px (round down).
How can I round down to the nearest hundredths place?
In general I would say that it's not possible, but there's a hack. However in the web, hacks seem to be the norm, instead of the exception, so I'll just say that it is possible:
div {
--shf: 4.9406564584124654e-322;
width: calc(((100% / 11) - 9.09px) * var(--shf) / var(--shf));
}
What this does: it multiplies the value to be rounded by a really small value that underflows the value starting at the third decimal point. Then, it divides the truncated value back, resulting in a rounded version of the value. This assumes that all browsers you support use 64-bit floating point values. If they don't, not only this will be wrong, it might return zero when using smaller floating point data types, completely breaking your page.
Change the exponent to -323 to round at the first decimal point and -324 to round at integer values.
--shf? –
Propman Floor(x) = Round(x - 0.5) and Ceiling(x) = Round(x + 0.5) –
Pestalozzi Unfortunately, there is not a native way in CSS to round (or ceil/floor) numbers.
However — you mentioned you are using Sass. I found a small Sass library that can round, floor, and ceil numbers to a specified precision.
For example, if you had a had 94.546 you could use decimal-floor(94.546, 2) which would return 94.54.
Unfortunately, this might not help if you have to use calc() to calculate on the fly with CSS. However, if you can pre-calculate the width and floor it with Sass it would fit your needs. A possible solution could be using @media queries as a way to set breakpoints and use those breakpoints in your Sass preprocessing.
round() CSS functionIn CSS Values and Units Module Level 4, you can round your number or dimension however you want with the round() CSS function.
round(<rounding-strategy>, valueToRound, roundingInterval)
The optional rounding-strategy can be one of up, down, nearest (the default), and to-zero, which respectively correspond to Math.ceil, Math.floor, Math.round, and Math.trunc in Javascript.
To resize a <canvas> element to almost (“the rounding interval being a CSS pixel, not a device pixel.”) fit its parent element, preserving the canvas pixel aspect ratio of 1:1 (assuming window.devicePixelRatio is a natural number):
canvas {
display: block;
width: round(down, 100%, 1px);
height: round(down, 100%, 1px);
}
Currently Chrome, Safari, and Firefox support this.
If your problem is a one-pixel rounding error related visual discrepancy, in most cases, you don't actually need to round. A relatively simple solution is to make one of your items take up all of the remaining space.
In a flex scenario, if you don't need your layout to wrap, you can even pick oen of your center items for the least noticeable effect possible.
.some-block {
width: calc( ( 100% / 11 ) - 9.09px );
flex-shrink: 0;
}
.some-block:nth-of-type(5) {
// Will attempt to take the whole width, but its siblings refuse to shrink, so it'll just take every bit of remaining space.
width: 100%;
}
Depending on your exact CSS case, the pixel substraction could potentially be avoided altogether by using paddings or margins and maybe an additional nested element. That way, the CSS calc() becomes irrelevant and it all could be done in Sass, which has much more powerful math tools and doesn't make the client work for calculations.
Also in a flex context, if your goal is just to make every element equal, you may not need calculations at all. See this question for details.
In a table, since cell widths are calculated left to right, a similar trick can be employed, but you'll have to give width: 100% to the last cell, since there's no concept of flex-shrink and column widths are decided left to right.
.my-table {
table-layout: fixed;
}
.table-cell {
width: calc( ( 100% / 11 ) - 9.09px );
}
.table-cell:last-of-type {
// Will attempt to take the whole width, but since previous column widths have already been determined, it cannot grow any further than its allocated width plus any stray pixels.
width: 100%;
}
If you dynamically generate your CSS, I created a small class to do simple functions like round(), ceil(), floor(), abs(), mod() and sign() -- it can be used to build complex calc rules which you can pass to each other as arguments. If you use "var(--my-variable)" as a parameter, the CSS variable will be used. Note: it works best with raw numbers and has a utility function toUnit to convert to pixels (etc) at the end.
you can call it like so, jquery as an example to set the style:
$('#my-element').css('width', `${cssHack.toUnit(cssHack.round(1000/3),'px')}`)
Below is the code for the class (es6, no dependencies):
class cssHack
{
//primary used for dynamic css variables-- pass in 'var(--dynamic-height)'
static toUnit(val,unit)
{
unit='1'+unit;
return ` calc(${val} * ${unit}) `;
}
static round(val)
{
// the magic number below is the lowest possible integer, causing a "underflow" that happily results in a rounding error we can use for purposeful rounding.
return ` calc(${val} * ${Number.MIN_VALUE} / ${Number.MIN_VALUE}) `;
}
static abs(val)
{
return ` max(${val}, calc(${val} * -1)) `;
}
static floor(val)
{
return cssHack.round(` calc(${val} - .5) `);
}
static ceil(val)
{
return cssHack.round( `calc(${val} + .5) `);
}
static sign(val)
{
let n = ` min(${val},0) `; //if val is positive then n =0. otherwise n=val.
let isNegative= ` min(${cssHack.ceil(cssHack.abs(n))},1) `;
let p = ` max(${val},0) `; //if val is negative then n=0, otherwise n = val;
let isPositive= ` min(${cssHack.ceil(cssHack.abs(p))},1) `;
return ` calc(${isPositive} + calc(${isNegative} * -1)) `;
}
static mod(val, base)
{
let abs = cssHack.abs(val);
let div = ` calc(${abs} / ${base})`;
let dec = ` calc(${div} - ${cssHack.floor(div)})`;
return cssHack.round(` calc(${dec} * ${base}) `);
}
}
cant you round with sass? since you already use it, try its round, floor and ceil methods: https://sass-lang.com/documentation/modules/math#bounding-functions
(also in older versions of sass, with a different syntax though)
© 2022 - 2024 — McMap. All rights reserved.
calc()rounds up. So if you want to round down you'll need to use JavaScript. – Credendum