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?
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.
How to get the sill height (height above the floor) of a Ifcwindow in ifc file
There is no solution to get the height above the floor directly. This is because the height above for depends on several factors, like how the wall is created in which the window resides, etc.
It could be that the sillHeight is exported by the original modelling software to a custom IFC property. You could check for that, but since there is no common standard for it, it's risky.
Your best bet is to look into the ObjectPlacement property which IfcWindow inherits from IfcProduct. The ObjectPlacement defines how a product is placed either in world space or relative to its host. See https://standards.buildingsmart.org/IFC/RELEASE/IFC4/ADD2/HTML/schema/templates/product-local-placement.htm for details.
You need to read the ObjectPlacement property, and check if there is a RelativeTo property, if so, you need to fill into that property as well, and check if it's the placement of a floor. If so, you can stop the looping, and perform a matrix calculation on all the placements you harvested to calculate the placement of window relative to floor.
(Maybe even more simple: calculate world placement of window and floor separately, than subtract the two vector z values to get the height of window from floor)
I am trying to determine if, using just CSS, there is there a way to format floating point numbers to a specific number of digits to the right of the decimal point?
The reason I want to do this is that I need to use a website that displays a massive amount of continually updating data in tables. (Because the data is continually updating, I can't just export the data into a spreadsheet.)
The values are floating point and range from 0 to 9999. The number of fractional digits varies from 0 to 7. For the most part, I have no use for anything beyond hundredths (2 places to the right of the decimal point). The exception is for values ranging from 0 to 9, but I'm willing to forego that case, if necessary.
This is an tiny example of how the data is currently displayed:
9484.83
133.57643
1344.5432
9.5848274
58.48381
5989.1
1.5847493
1.348
As you can see, it's hard to read the data with that presentation. Ideally, I would like to use a CSS overlay to reformat that data as:
9484.83
133.57
1344.54
9.584
58.48
5989.10
1.584
1.348
If that's not possible, I'm fine with:
9484.83
133.57
1344.54
9.58
58.48
5989.10
1.58
1.34
Using CSS, I can easily enforce a maximum width for the HTML elements displaying the values. I can use em units to try to not get any digits partially displayed (not 100% effective though, unless forcing a monospaced font, which results in much less visible data in the viewport). But even using such techniques, I still wind up with values displayed as 58.4848.
Can CSS be used to solve this task?
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.