Viewport height usually returns an integer value; however I am now noticing it returning a value with 2 decimal points.
Why / how do viewport units get rounded?
(Additionally, I am not resizing my browser window -- yet 100vh returns 616px sometimes, other times 616.36px)
The specification merely prescribes that 1 unit of vw is:
1% of viewport’s width
This ought to be reasonably precise, as 100 of these units should fill the entire width, so rounding will cause problems here.
The CSS definition of number includes integers and decimals see v2 or v3.
In the cases of the browsers that return an integer, if the view port is not coincidentally exactly divisible by 100, and if the result of 1vw * 100 is significantly off - it is worth raising a bug with the browser vendor.
Result of browser test... note that size difference is down to browser chuff and tool size.
Firefox seems to reliably calculate to 4dp:
height: 3.06667px;
width: 6.76667px;
An old version of IE I have lying around similarly reliable, but to 2dp:
height: 3.78px;
width: 6.76px
How are you obtaining your numbers?
Related
I'm writing a calculation for the left property of an absolutely positioned element. After reading the syntax the only thing I can think of is that I'm trying to multiply two different units but I can't find confirmation for that as I thought the first calculation would have resolved to an integer.
left: calc(1vw * ((100vw / 100) * 1.2));
I need to capture the full size of the viewport so 100vw and then divide it by 100. So if the screen is 1600px this should resolve to 16, then multiply by 1.2 so now it is 19.2 and finally multiply by 1vw to convert it to 19.2vw. The issue I can't confirm is whether the first calculation resolves to an integer (16) or a measurement (16px). If the former then I have no idea why this isn't working. If the latter, how do I get around this?
See MDN on calc:
Multiplication. At least one of the arguments must be a number.
Your expression is trying to multiply 1vw by another vw amount and hence is not valid.
I've been trying to do a complicated calculation in CSS to get rid of media queries on a page, and not require too many of them. The second part of the code below with the long decimal number is me trying to use a set number to calculate the percentage of something (a padding). That number almost perfectly represents the percentage needed per pixel of a view-port, so if I had a massive view-port it could still calculate the percentage or even an extremely small one. But since this number needs to be a percent and I can't just put a percent sign at the end. I needed to get it into a percent via pixels. Meaning calculate how many pixels the browser would calculate if it was a percent. I figured out to take the actual 100 percent width of the page and divide it by 100 to get 1% of the page in pixels. I then multiply that by the number we got for the percentage of the page in the second part of the calculation, giving me the actual pixel width as if it were a percent, and as if the browser had calculated this itself. This is the calc operation I used, that is not working properly:
padding-left: calc((100% / 100) * (0.013641975308642 * 100vw));
It's not working and when we look with chrome dev tools, it tells me the object is invalid. What am I doing wrong?
I have an element that I want to increase in width as its parent decreases in width
The equation should look something like:
width:calc(150 + 500 / 100%);
But at least in Chrome it says the property is invalid whenever I try to divide by percent width.
Is this possible? (Alternatives to calc() are acceptable)
EDIT
I added spaces (didn't realize about that). Tried it with a variety of units, no luck yet.
Fiddle
<div style="width:100%;position:relative;">
<div style="width:calc(150px + (500 / 100%));position:absolute;top:0;left:0;">This one should get bigger as the page gets smaller</div>
</div>
Thought process:
Fixed width (150px) plus 500 divided by the current parent width.
So if the parent is 500px:
150 + 500/500 -> 150 + 1 = 151
Parent is 100px
150 + 500/100 -> 150 + 5 = 155
Parent is 20px
150 + 500/20 -> 150 + 100 = 250
Solution is so simple it's mind-boggling. Move the 500px into the first part and subtract the width.
width:calc(650px - 100%);
Gets wider as its parent gets narrower.
Updated fiddle
It seems like you've found your solution already, but I'll answer specifically why your original code wasn't working:
I'll start with the syntax for a product equation (when you divide) in calc():
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]
The spec for the calc() property syntax is a bit more complicated than it sounds. When dividing in calc() as you're doing here, the right side must be a number. You cannot use "unit-ed" values:
Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.
When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the production in the CSS Syntax Module. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.
That is to say, you cannot divide something by a percentage value like 100%.
calc() need spaces between the operators ( but just in + and -), but you are missing the units, which could be px, em,rem etc..., so would something like this:
width:calc(150px + (500px / 100%))
This is would be invalid because as explained by #TylerH, you can't divide by un-ed values(px, %, etc).
But if was possible, when you divide by 100% you are multiplying by 1, so basically you'll stay the same because 1 is the neutral value for multiplication, so this would be useless to do.
Hardly to know, because there isn't much to see in your question, and still invalid, but I'm guessing you are looking for something like this instead:
width:calc(150px + (100% / 500px))
Given your Edited question AFAIK you have to use JS to achieve this, unless you could provide a Fiddle.
Is there a limit on the amount of padding / margin / translateX / etc a div can have ?
For instance, would something like margin-left: 999999999px work reliably across browsers ?
The CSS3 standard (http://dev.w3.org/csswg/css-values/#lengths) does not specify a limit for lengths, it just states that it is a dimension (a number/integer with a unit identifier). And it doesn't specify a limit for integers either.
MDN gives the same description, but on this page (https://developer.mozilla.org/en-US/docs/Web/CSS/integer) it states that
There is no official range of valid values. Opera supports
values up to 2^15-1, IE up to 2^20-1 and other browsers even higher.
During the CSS3 Values cycle there were a lot of discussion about
setting a minimal limit to support: the latest decision, in April 2012
during the LC phase, was [-2^27-1; 2^27-1] # but other values like 2^24-1
and 2^30-1 were also proposed # #. The latest Editor's draft doesn't
list a limit anymore.
So I guess the limit will depend on the limits set by the browser that you use.
I am going to print from the browser to a receipt printer. I want to support 58mm --> full size paper using responsive design. I used: http://www.unitconversion.org/typography/pixels-x-to-millimeters-conversion.html and it says 58 mm is approx. 219 pixels.
Is this an accurate way to measure pixels in the browser?
That converter is misleading - it can produce only approximations (or at the very best, results that work for your specific display), but never generally accurate results.
The number of pixels per mm (or any other physical unit) will vary from display to display, as different displays will have a different number of differently sized pixels. See "Pixel Density" in Wikipedia.
You can specify physical measures in CSS and when printing they should come out OK if the browser and the printer driver are handling things right:
.mysheet { width: 19.2cm; height: 8cm; }
Some Browser/OS/display combinations (I don't know which protocols do this) apparently also can interpret physical measures and render them in their correct size on screen.