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.
Related
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'm currently using the following rule:
margin-left: calc(((100vw - 624px) / 144) * 5);
At 1200px viewport width this gives a value of 20px. What I actually want, however, is to get a result of 20%. Ideally that would mean changing the multiplication factor of '5' from an integer to '5%'. But in order to do that I need to remove the units from the rest of the calculation, so that calc would be processing 4 * 5% rather than 4px * 5.
In SASS I could divide by 1px, but in calc you can only divide by a number, not a united value.
Is there a way to remove units from part of a calc function?
There is a strip-unit function for SASS and other CSS preprocessors, but there's no comparable function in CSS3.
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.
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?
"Simple" question that I can't find the answer to -- What does -webkit-perspective actually do mathematically? (I know the effect it has, it basically acts like a focal-length control) e.g. what does -webkit-perspective: 500 mean?!?
I need to find the on-screen location of something that's been moved using, among other things, -webkit-perspective
The CSS 3D Transforms Module working draft gives the following explanation:
perspective(<number>)
specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the
viewer and whose peak represents the viewer's position. The viewable
area is the region bounded by the four edges of the viewport (the
portion of the browser window used for rendering the webpage between
the viewer's position and a point at a distance of infinity from the
viewer). The depth, given as the parameter to the function, represents
the distance of the z=0 plane from the viewer. Lower values give a
more flattened pyramid and therefore a more pronounced perspective
effect. The value is given in pixels, so a value of 1000 gives a
moderate amount of foreshortening and a value of 200 gives an extreme
amount. The matrix is computed by starting with an identity matrix and
replacing the value at row 3, column 4 with the value -1/depth. The
value for depth must be greater than zero, otherwise the function is
invalid.
This is something of a start, if not entirely clear. The first sentence leads me to believe the perspective projection matrix article on Wikipedia might be of some help, although in the comments on this post it is revealed there might be some slight differences between the CSS Working Group's conventions and those found in Wikipedia, so please check those out to save yourself a headache.
Check out http://en.wikipedia.org/wiki/Perspective_projection#Diagram
After reading the previous comments and doing some research and testing I'm pretty sure this is correct.
Notice that this is same for the Y coord too.
Transformed X = Original X * ( Perspective / ( Perspective - Z translation ) )
eg.
Div is 500px wide
Perspective is 10000px
Transform is -5000px in Z direction
Transformed Width = 500 * ( 10000 / ( 10000 - ( -5000 ) )
Transformed Width = 500 * ( 10000 / 15000) = 500 * (2/3) = 333px
#Domenic Oddly enough, the description "The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth." has already been removed from the The CSS 3D Transforms Module working draft now. Perhaps there might have been some inaccuracies with this description.
Well, as to the question what does the number in perspective(<number>) means, I think it could be seen as the distance between the position of the imagined camera and your computer screen.