Formatting¶

CalcpadCE gives a worksheet two output channels: the formula trace and a layer of presentation directives — CSS, Markdown, inline HTML, page-break controls and number-formatting commands — so the same source produces both an editable calculation and a print-ready report.

The six worksheets in this group cover the toolkit end to end. CSS Classes demonstrates the built-in classes (ref, ok, err, warn, note) and how to define your own; Design Check wraps those classes in a reusable check$(s; f) function that flips between green and red based on a utilisation ratio; and Page Header with Logo builds a printable header from a logo SVG and a small HTML table. Markdown toggles #md on to mix Markdown headings, lists and tables with CalcpadCE math, and Beam Design with Markdown applies that mode to a full Eurocode 2 RC beam check, complete with page breaks. Rounding and Formatting closes the tour with the #round, #format and #scale directives for tuning numerical display.

CSS Classes¶

Reference for the built-in CSS classes ($ref$, $ok$, $err$, $warn$, $note$) and how to define custom classes for highlighting design-check results inline.

Code:

"CSS Classes in CalcpadCE
'<p class="ref">[ref (No)]</p>
'<p>Design checks: <span class="ok">ok</span> / <span class="err">fail</span>.
'Image (side)
'<img class="side" style="height:114pt; width:127pt;" src="../../Images/mechanics/beams/cantilever-beam-concentrated-force.png" alt="cantilever-beam-concentrated-force.png">
'<div class="fold">
'<h4>Folded content heading</h4>
'Folded content line 1
'Folded content line 2
'Folded content line 3...
'</div>
#novar
'Bordered table
'<table class="bordered">
'<thead>
'<tr><th>col 1</th><th>col 2</th></tr>
'</thead>
'<tbody>
'<tr><td>'11'</td><td>'12'</td></tr>
'<tr><td>'21'</td><td>'22'</td></tr>
'</tbody>
'</table>
'Data table (first col aligned left, others - right)
'<table class="data">
'<tbody>
'<tr><td>Height -</td><td>111.0 m</td></tr>
'<tr><td>Thickness -</td><td>2 cm</td></tr>
'</tbody>
'</table>

Design Check¶

Reusable check function that flips between ok and err CSS classes based on a utilisation ratio, the canonical pattern for engineering design checks.

Code:

"Design check example
#def check$(s$; f$)
    #if s$ < f$
        '<p>Design check:'s$'&le;'f$'<span class="ok">The check is satisfied ✔</span>
    #else
        '<p>Design check:'s$'&gt;'f$'<span class="err">The check is NOT satisfied ✖</span>
    #end if
#end def
'
'Stress -'σ = 200MPa
'Resitance -'f_y = 205MPa
check$(σ; f_y)
'
'Stress -'σ = 210MPa
check$(σ; f_y)

Rendered Output:

Design check example

Stress - σ = 200 MPa

Resitance - f_y = 205 MPa

Design check: σ = 200 MPa ≤ f_y = 205 MPa The check is satisfied ✔

Stress - σ = 210 MPa

Design check: σ = 210 MPa > f_y = 205 MPa The check is NOT satisfied ✖

Builds a print-ready page header from a logo SVG and a small HTML table, the standard recipe for branded engineering reports.

Code:

'<style>.header{width: 100%; max-width:170mm;} .header th{border: solid 1pt lightgray; text-align:left; font-size:90%;} .header th p{line-height:1em; } .logo{width:80pt; height:17.6pt; float:right; margin-top:3pt;} .addr{margin-bottom:8pt;} .pr{font-size:130%;}</style>
'<table class="header"><thead>
'<tr><th rowspan=3><img class="logo" src="https://raw.githubusercontent.com/imartincei/CalcpadCE/refs/heads/main/docs/media/logo.svg" alt="logo">
'<h4 style="margin:0;">My Company<sup>®</sup></h4>
'<p class="addr"><small>123 Street, 1234 City, tel. +123 4567890<br/>email: <a href="mailto:info@example.com">info@example.com</a></small></p>
'<p><small>Project: </small><b class="pr">24 Kensington Road Residential</b></p>
'<p><small>Client: </small>Dream Home Development Ltd</p>
'</th>'
'<th><small>Date:</small><br/>11/2024</th>
'<th><small>Page:</small><br/></th></tr><tr>
'<th><small>Job No:</small><br/>1001</th>
'<th><small>Revision:</small><br/>0</th></tr><tr>
'<th><small>Design by:</small><br/>ABC</th>
'<th><small>Check by:</small><br/>DEF</th></tr>
'</thead><tbody><tr><td colspan="4" style="padding-top:6pt;">
'Your worksheet content goes here.
#for n = 1 : 10
    'Line - 'n
#loop
'</td></tr></tbody></table>

Rendered Output:

My Company^®

123 Street, 1234 City, tel. +123 4567890
email: info@example.com

Project: 24 Kensington Road Residential

Client: Dream Home Development Ltd

Date:
11/2024

Page:

Job No:
1001

Revision:
0

Design by:
ABC

Check by:
DEF

Your worksheet content goes here.

Line - n = 1

Line - n = 2

Line - n = 3

Line - n = 4

Line - n = 5

Line - n = 6

Line - n = 7

Line - n = 8

Line - n = 9

Line - n = 10

Markdown¶

Mixes Markdown headings, lists and tables with Calcpad math by toggling #md on, the building block for Markdown-driven reports.

Code:

#md on
"Markdown in CalcpadCE
'---
'### Heading 3
'#### Heading 4
'##### Heading 5
'###### Heading 6
'A quote in comment can be escaped by entering ''another'' one
'This text is **bold**, this is *italic* and this is ***bold-italic***.
'You can also have ++underlined++, ~~deleted~~ and ==marked== text.
'Adding ~sub~script and ^super^script is now easier than ever.
'Code:
'`c = a + b`
'Image:
'![CalcpadCE](https://raw.githubusercontent.com/imartincei/CalcpadCE/refs/heads/main/docs/media/logo.svg)
'Links: <https://www.markdownguide.org>, [CalcpadCE website](https://calcpad-ce.org)
'> Blockquote
'>> Next level

Rendered Output:

Markdown in CalcpadCE

Heading 3

Heading 4

Heading 5

Heading 6

A quote in comment can be escaped by entering 'another' one

This text is bold, this is italic and this is bold-italic.

You can also have underlined, ~~deleted~~ and marked text.

Adding _subscript and ^superscript is now easier than ever.

Code:

c = a + b

Image:

Links: https://www.markdownguide.org, CalcpadCE website

Blockquote

Next level

Beam Design with Markdown¶

Full RC beam design check to Eurocode 2, authored entirely in Markdown mode with page breaks for a print-ready report.

Code:

#def page_break$ = '<p style="break-after:page;"></p>
#md on
'## RC Beam Design to Eurocode 2
'---
'### Input data
'#### Beam and cross section dimensions
'Beam length -'L = 10m
'Cross section dimensions: height -'h = 700mm _
', width -'b = 250mm
'#### Loads
'Uniformly distributed load -'q = 12kN÷m'(total, factored)
'#### Materials
'##### Concrete
'Characteristic compressive cylinder strength -'f_ck = 20MPa
'Partial safety factor for concrete -'γ_c = 1.5','α_cc = 0.85
'Design compressive cylinder strength -'f_cd = α_cc*f_ck/γ_c
'Factor for effective compression zone depth -'λ = 0.8
'Effective compressive strength factor -'η = 1.0
'Ultimate compressive strain -'ε_cu3 = 0.0035
'Mean value of axial tensile strength -'f_ctm = 0.30*f_ck^(2÷3)*MPa^(1÷3)|MPa
'##### Steel
'<p><ins>Longitudinal reinforcement</ins></p>
'Characteristic yield strength -'f_yk = 500MPa
'Partial safety factor for steel -'γ_s = 1.15
'Design yield strength -'f_yd = f_yk/γ_s
'Modulus of elasticity -'E_s = 200000MPa
page_break$
 '++Shear reinforcement++
'Characteristic yield strength -'f_ywk = 500MPa
'Design yield strength -'f_ywd = f_yk/γ_s
'### Results
'#### Internal forces
'Support reaction -'A = q*L/2
'Shear force diagram -'V(x) = A - q*x
'<!--'PlotHeight = 100'-->
$Plot{V(x) @ x = 0m : L}
'Design shear force -'V_Ed = A
'Bending moment diagram -'M(x) = A*x - q*x^2/2
$Plot{M(x) @ x = 0m : L}
'Design bending moment -'M_Ed = q*L^2/8
page_break$
'### Bending design
'Concrete cover to the center of reinforcement -'d_1 = 50mm
'Effective cross section depth -'d = h - d_1'cm
'Relative design bending moment -'m_Ed = M_Ed/(b*d^2*η*f_cd)
'Compressive zone depth -'x = d/λ*(1 - sqr(1 - 2*m_Ed))
'Relative compression zone depth -'ξ = x/d
'Design reinforcement yield strain -'ε_yd = f_yd/E_s
'Relative depth of compression zone at yielding of bottom reinforcement
ξ_yd = ε_cu3/(ε_cu3 + ε_yd)
'Limit compression zone depth -'ξ_lim = ξ_yd
'(*ξ*~lim~ = *ξ*~yd~ for elastic and *ξ*~lim~ = 0.45 for plastic analysis)
ξ'≤'ξ_lim'- Compressive reinforcement is **NOT** required.
'Lever arm of internal forces -'z = d - 0.5*λ*x
'Required main reinforcement -'A_sL,rq = M_Ed/(z*f_yd)|mm^2
'Selected'n_b = 3'bars with size'Ø_L = 20mm
'Provided main reinforcement'A_sL = n_b*π*Ø_L^2/4
'Reinforcement ratio -'ρ_L = A_sL/(b*d)
'Minimum reinforcement ratio
ρ_min = max(0.26*f_ctm/f_yk; 0.0013)'<'ρ_L
'Maximum reinforcement ratio -'ρ_max = 0.04'>'ρ_L
page_break$
'### Shear design
'Shear capacity without reinforcement
k = min(1 + sqr(200mm/d); 2)', 'C_Rd_c = 0.18/γ_c', 'k_1 = 0.15', 'σ_cp = 0MPa
v_min = 0.035*k^(3/2)*sqr(f_ck)*MPa^0.5|MPa
V_Rd_c_ = (C_Rd_c*k*(100*ρ_L*f_ck/MPa)^(1/3)*MPa + k_1*σ_cp)*b*d
'Minimum shear resistance
V_Rd_c_min = (v_min + k_1*σ_cp)*b*d
V_Rd_c = max(V_Rd_c_min; V_Rd_c_)
'Design check:
V_Ed'≤'V_Rd_c'. Shear reinforcement is **NOT** required by calculations!
'Nominal reinforcement will be provided as follows:
'Shear links with'n_w = 2'legs and diameter -'d_w = 6mm
'Area of one leg -'A_sw1 = π*(d_w/2)^2
'Maximum stirrup spacing -'s_max = min(0.75*d; 300mm)
'Provided stirrup spacing -'s = s_max
'Provided shear reinforcement area -'A_sw = n_w*A_sw1*(1m/s)'/m
'Reinforcement ratio -'ρ_w = A_sw/(s*b)
ρ_w,min = (0.08*sqr(f_ck)/f_yk)*MPa^(1÷2)'<'ρ_w

Rounding and Formatting¶

Reference for the $round$, $format$ and $scale$ directives, covering decimal rounding, significant figures, scientific notation and unit-aware display.

Code:

"Rounding and formatting numbers in CalcpadCE
#round 6
'Custom rounding -'a = 100*sqr(2)' (to 6 digits)
#round default
'Default rounding -'a
#format 0.00##E+00
'Custom worksheet level formatting -'a' - custom(0.00##E+00)
#format default
'Default formatting -'a
'Custom inline formatting
a = 100*sqr(2):F4'- decimal (F4)
b = 100*sqr(3):E3'- engineering (E3)
b:e3'- engineering (e3 - with small letter ''e'')
c = a + b:G6'- general (G6)
10000*c:N2'- numeric (N3 - with thousands separator)
P = 300:C'- currency (C)
'Inline formatting overrides worksheet level formatting and both override rounding
'Formatting with units
a = sqr(2m^2)|cm:0.0000E0'- custom (0.0000E0)
b = m*sqr(3):0.00000'- custom (0.00000)
c = b - a|μm:N1'- numeric (N1)

Rendered Output:

Rounding and formatting numbers in CalcpadCE

Custom rounding - a = 100 · √ 2 = 141.421356 (to 6 digits)

Default rounding - a = 141.42

Custom worksheet level formatting - a = 1.4142×10⁺⁰² - custom(0.00##E+00)

Default formatting - a = 141.42

Custom inline formatting

a = 100 · √ 2 = 141.4214 - decimal (F4)

b = 100 · √ 3 = 1.732×10⁺⁰⁰² - engineering (E3)

b = 1.732e+002 - engineering (e3 - with small letter 'e')

c = a + b = 141.4214 + 1.732×10⁺⁰⁰² = 314.626 - general (G6)

10000 · c = 10000 · 314.626 = 3,146,264.37 - numeric (N3 - with thousands separator)

P = 300 = ¤300.00 - currency (C)

Inline formatting overrides worksheet level formatting and both override rounding

Formatting with units

a = √ 2 m² = 1.4142×10² cm - custom (0.0000E0)

b = m · √ 3 = 1.73205 m - custom (0.00000)

c = b − a = 1.73205 m − 1.4142×10² cm = 317,837.2 μm - numeric (N1)

Spotted an error? Edit these examples.

Height -	111.0 m
Thickness -	2 cm

Formatting¶

CSS Classes¶

Design Check¶

Page Header with Logo¶

Markdown¶

Beam Design with Markdown¶

Rounding and Formatting¶