Topic: Reporting

Online Help

Formatting with Html and CSS


Calcpad can be used as a development platform for professional engineering programs. If you are not going to do that, you can skip this chapter.

Html (Hyper Text Markup Language) is a markup language which is created for formatting web pages. You can change the font type, size and weight, the color of the text and to insert tables, images, etc. This is performed by adding special elements called "tags". Each tag is enclosed in angular brackets: "<tag>". Some tags are used in pairs - opening "<tag>" and closing "</tag>". The contents is going in between. For example, if you want to make some text bold, you can use the following tags: <b>Bold text</b>. Even if you are not a professional programmer, you can easily learn some basic Html, to use with Calcpad:

Html code Output
<h3>Heading 3</h3>

Heading 3
<h4>Heading 4</h4>

Heading 4
<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6
<hr/> (horizontal line)
<p>Paragraph</p>

Paragraph
Line<br/>break Line
break
<b>Bold</b> Bold
<i>Italic</i> Italic
<u>Underlined</u> Underlined
<s>Struck through</s> Struck through
<span style="color:red;">Red</span> Red
x<sup>superscript</sup> x superscript
x<sub>subscript</sub> x subscript
<span style="font:14pt Times;">
Times, 14pt
</span>		 Times, 14pt

You can put Html tags only in comments, but you can also make them affect expressions. For example:

'<span style="color:red;"> as simple as ' 2 + 2 '</span>'

will give the following output:

as simple as 2 + 2 = 4

We simply enclosed the expression with two comments. The first comment contains the opening tag '<span style="color:red;">' and the second - the closing tag '</span>'. Everything between the two tags is colored in red. Make sure not to forget the quotes. Otherwise, the program will try to parse the Html code as math expression and will return an error. The following code: style="color:red" is called "inline CSS" (Cascading Style Sheets). It is used to format the look of Html documents. You can learn more about Html and CSS from the following links:

http://www.w3schools.com/html/

http://www.w3schools.com/CSS/

You can also use some of the many free WYSIWYG Html editors available on the Internet.

Predefined classes

Some formatting that is commonly used in engineering design worksheets is predefined as CSS classes and can be inserted by simply assigning the respective class to Html elements.

err - adds red color to text:

'<span class="err"> The check is not satisfied ✖'</span>'
The check is not satisfied ✖

ok - adds green color to text:

'<span class="ok"> The check is satisfied ✔'</span>'
The check is satisfied ✔

ref - (right aligned) it is used for references to design codes and equation numbering:

'<span class="ref"> [EN 1992-1-1, §9.2.2]'</span>'[EN 1992-1-1, §9.2.2]

bordered - adds border to tables:

'<table class="bordered">'...</table>'

data - makes the first column left aligned and the others - right aligned:

'<table class="data">'...</table>'

Content folding

If you have some long and detailed calculations, you can fold them optionally in the output. They will be hidden by default, except for the first line, which can be used for the section heading. All you need to do is to enclose the folding section into a Html "div" element with class "fold", as follows:

  '<div class="fold">
  '<b>Heading</b> (click to unfold)
  'Content to be folded
  '</div>

The result will look as follows:

Heading (click to unfold)

Content to be folded


Table of contents