CSS Data Type - <calc-constant>

CSS <calc-constant> data type defines predefined mathematical constants that can be used in CSS calculations such as e and pi. For convenience, some of these mathematical constants are provided directly by CSS, helping the authors avoid typing out many digits or compute them manually.

Possible Values

  • e − The mathematical constant known as the natural logarithm, which is approximately equal to 2.7182818284590452354

  • pi − It represents the ratio of a circle's circumference to its diameter. It is approximately equal to 3.1415926535897932

  • infinity & -infinity − Infinite value. It shows the biggest or smallest possible value.

  • NaN − A value that stands for "Not a Number" canonical casing.

Syntax

<calc()> = e | pi | infinity | -infinity | NaN;

Notes

When serializing arguments within calc(), it follows the IEEE-754 standard for floating-point math, considering cases involving constants such as infinity and NaN.

  • An infinity value will be returned when divided by zero. Depending on the value of numerator, it will be either positive or negative infinity.

  • If you add, subtract, or multiply infinity with anything, the result will be infinity unless you get NaN.

  • Any operation that includes at least one NaN argument, such as 0/0, infinity/infinity, 0*infinity, infinity + (-infinity), and infinity - infinity, will result in NaN.

  • Possible values include positive and negative zero (0⁺ and 0⁻). This causes the following effects:

    • Multiplication or division resulting in 0 with a single negative argument (e.g., -5 * 0 or 1 / (-infinity)) or negative results from other math functions will result in 0⁻.

    • 0⁻ + 0⁻ or 0⁻ - 0 will result in 0⁻. Any additions or subtractions that result in a zero result in 0⁺.

    • Multiplying or dividing 0⁻ with a positive number (including 0⁺) results in a negative result (either 0⁻ or -infinity), but multiplying or dividing 0⁻ with a negative number results in a positive result.

Except for NaN, all constants are case-insensitive, therefore calc(Pi), calc(E), and calc(InFiNiTy) are valid.

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

Following are all invalid constant:

nan
Nan
NAN

CSS <calc-constant> - Use e and pi in calc()

The following example demonstrates the use of e in calc() for exponential rotation and use of pi in sin() function −

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
   }
   .box {
      display: flex;
      flex-direction: column;
      align-items: left;
      width: 200px;
   }
   .box > div {
      width: 100px;
      height: 100px;
      margin: 10px;
   }
   span {
      font-family: monospace;
      font-size: 0.8em;
   }
   .e-box {
      background-color: red;
   }
   .pi-box {
      background-color: red;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <label for="e-slider">e:</label>
         <input type="range" min="0" max="5" step="0.01" value="0" class="e-slider" />
         <span class="e-value"></span>
         <div class="e-box"></div>
      </div>
      <div class="box">
         <label for="pi-slider">pi:</label>
         <input type="range" min="0" max="1" step="0.01" value="0" class="pi-slider" />
         <span class="pi-value"></span>
         <div class="pi-box"></div>
      </div>
   </div>  
   <script>
      const eSliderElements = document.querySelectorAll(".e-slider");
      const piSliderElements = document.querySelectorAll(".pi-slider");

      const eValueElements = document.querySelectorAll(".e-value");
      const piValueElements = document.querySelectorAll(".pi-value");

      eSliderElements.forEach(function (eSlider, index) {
         eSlider.addEventListener("input", function () {
         document.querySelectorAll(".e-box")[index].style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
         eValueElements[index].textContent = document.querySelectorAll(".e-box")[index].style.transform;
         });
      });

      piSliderElements.forEach(function (piSlider, index) {
         piSlider.addEventListener("input", function () {
         document.querySelectorAll(".pi-box")[index].style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
         piValueElements[index].textContent = document.querySelectorAll(".pi-box")[index].style.rotate;
         });
      });
   </script>
</body>
</html>

CSS <calc-constant> - Infinity, NaN, and division by zero

The following example demonstrates the calculated width value when dividing by zero and how different calc() constants appear when serialized in the console −

<html>
<head>
<style>
   div {
      height: 100px;
      background-color: blue;
      width: calc(1px / 0);
   }
</style>
</head>
<body>
   <div></div>
   <script>
      const divElement = document.querySelector("div");
         document.write(divElement.offsetWidth);    // infinity clamped to largest value for width
         document.write("<br><br>");

         // Function to set the width,
      const logSerializedWidth = value => {
         divElement.style.width = value;     // Set the width of the div using the provided value
         document.write(divElement.style.width);    // Display the serialized width
         document.write("<br><br>");
      };

      // Call the function with different calculations
      logSerializedWidth("calc(1px / 0)");      // calc(infinity * 1px)
      logSerializedWidth("calc(1px / -0)");     // calc(-infinity * 1px)
      logSerializedWidth("calc(1px  -infinity  -infinity)");     // calc(infinity * 1px)
      logSerializedWidth("calc(1px  -infinity  infinity)");      // calc(-infinity * 1px) 
      logSerializedWidth("calc(1px  (NaN + 1))");      // calc(NaN  1px)    
   </script>
</body>
</html>
Advertisements