W3C home > Mailing lists > Public > www-style@w3.org > April 2014

Can we have more maths in calc()?

From: Vasilis van Gemert <vasilis@vasilis.nl>
Date: Sun, 6 Apr 2014 21:26:30 +0200
Message-Id: <87440FF4-F911-4BA6-AB32-57EAE450E203@vasilis.nl>
To: www-style@w3.org
Hi,

The last few days Iíve been playing with ratios to define layouts and font-sizes, as explained in this recent article on A List Apart: http://alistapart.com/article/content-out-layout

With the theory in this article you can create layouts and typographic scales, like the example I created to illustrate what I mean: http://nerd.vasilis.nl/code/calc/power.html

I had to use a calculator to calculate the different flex-values. I was wondering why we couldnít use the calculator we have in CSS. 

So Instead of writing this:

div {
    flex: 11.301754422787 1 11.301754422787px;
}

We could write something like this:

div {
    flex: calc(1.414 pow7) 1 calc(1.414px pow7);
}

If we want to use calc() to create this layout today we can do that, but it gets messy very fast

div {
    flex: calc(1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414) 1 calc(1.414px  * 1.414 * 1.414 * 1.414 * 1.414 * 1.414 * 1.414);
}

So far Iíve only found the need for exponents, but Iím sure thereís a use for more functions. 

Cheers,
Vasilis
Received on Sunday, 6 April 2014 19:26:57 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:21 UTC