calc() : CSS Calculation Expression

Summary

Generate a CSS calc() expression for dynamic style calculations. This allows mathematical operations in CSS property values with units.

Signature

calc(expression)

Parameters

Returns

Type: String

A formatted CSS calc() expression string.

Examples

Dynamic Width Calculation

<div style="width: ; border: 1px solid black;">
  <p>Content with calculated width</p>
</div>

Data:

doc.Params["model"] = new { };

Output:

<div style="width: calc(100% - 20px); border: 1px solid black;">
  <p>Content with calculated width</p>
</div>

Variable-Based Calculations

<div style="margin-left: ;">
  <p>Indented content</p>
</div>

Data:

doc.Params["model"] = new {
    indent = 20
};

Output:

<div style="margin-left: calc(20px + 1em);">
  <p>Indented content</p>
</div>

Responsive Sizing

<table style="width: ;">
  <tr>
    <td>Table content</td>
  </tr>
</table>

Data:

doc.Params["model"] = new {
    sidebarWidth = 200
};

Output:

<table style="width: calc(100% - 200px);">
  <tr>
    <td>Table content</td>
  </tr>
</table>

Grid Layout Calculations

  <div style="width: ; float: left;">
    <p></p>
  </div>

Data:

doc.Params["model"] = new {
    columns = new[] {
        new { content = "Column 1" },
        new { content = "Column 2" },
        new { content = "Column 3" }
    }
};

Output:

<div style="width: calc(100% / 3); float: left;">
  <p>Column 1</p>
</div>
<div style="width: calc(100% / 3); float: left;">
  <p>Column 2</p>
</div>
<div style="width: calc(100% / 3); float: left;">
  <p>Column 3</p>
</div>

Font Size Scaling

<h1 style="font-size: ;">
  
</h1>

Data:

doc.Params["model"] = new {
    title = "Scaled Heading",
    baseFontSize = 12,
    scale = 2.5
};

Output:

<h1 style="font-size: calc(12pt * 2.5);">
  Scaled Heading
</h1>

Notes

• Returns a formatted calc() string for use in CSS properties
• Supports standard CSS calc() operations:
  • Addition: +
  • Subtraction: -
  • Multiplication: *
  • Division: /
• Can mix different units (px, %, em, pt, etc.)
• Whitespace around operators is recommended for clarity
• Useful for:
  • Responsive layouts
  • Dynamic spacing
  • Proportional sizing
  • Grid calculations
  • Font scaling
• Not all CSS properties support calc() (check PDF rendering engine)
• Expression is evaluated by the CSS engine, not at binding time
• For pure numeric calculations without units, use standard math operators instead
• Common patterns:
  • calc('100% - Npx') - full width minus fixed offset
  • calc('100% / N') - equal divisions
  • calc('Npx + Nem') - mixed unit addition

See Also

• var Function
• string Function
• concat Function