Equations, example usage | PracticalSeries: Web Development

22.4 Equations, example usage

There are five typical arrangements of equations within the web template, the first four are all variations of a theme and the last one is very simple:

Full equation
Full equation with background shading
Basic equation
Basic equation with background shading
An inline equation

The only difference between these is in the HTML, I show the HTML and an example for each type along with some notes in the following sections:

22.4.1 Full equation

This is the one we’ve already looked at:

full equation html

<div class="formulae" id="js--e99-01">                 
    <div class="formulae-header">Equation Header</div> 
    <div class="formulae-container"> 
        <div class="formulae-equ"> 
            `sum_(i=1)^n i^3=((n(n+1))/2)^2` 
        </div>
        <div class="formulae-num">(99.1)
    </div>   
    <div class="formulae-caption">Equation caption</div>
</div>

Code 22.5 Full equation HTML

It looks like this:

Equation Header

`sum_(i=1)^n i^3=((n(n+1))/2)^2`

(99.1)

Equation caption

22.4.2 Full equation with shading

This is the same as the above but with background shading.

full equation with shading html

<div class="formulae" id="js--e99-01">                 
    <div class="formulae-header formulae-bkgd">Equation Header</div>
    <div class="formulae-container formulae-bkgd">
        <div class="formulae-equ"> 
            `f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz` 
        </div>
        <div class="formulae-num">(99.1)
    </div>   
    <div class="formulae-caption">Equation caption</div>
</div>

Code 22.6 Full equation with shading HTML

It looks like this:

Equation Header

`f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz`

(99.1)

Equation caption

The class formulae-bkgd has been added to the formulae-header and formulae-container div elements.

22.4.3 Basic equation

The basic equation is the same as the full equation, but does not have a heading line or a caption:

basic equation html

<div class="formulae" id="js--e99-01">
    <div class="formulae-container">
        <div class="formulae-equ">
            `x=(-b +- sqrt(b^2 – 4ac))/(2a)` 
        </div> 
        <div class="formulae-num">(99.1) </div>
    </div> 
    <div class="formulae-caption"> </div>
</div>

Code 22.7 Basic equation HTML

It looks like this:

`x=(-b +- sqrt(b^2 – 4ac))/(2a)`

(99.1)

The formulae-caption div still exists (it gives spacing after the equation), but if no caption is required, just leave the div empty.

22.4.4 Basic equation with shading

This is the same as the previous, but with shading:

basic equation with shading HTML

<div class="formulae" id="js--e99-01">
    <div class="formulae-container formulae-bkgd ">
        <div class="formulae-equ">
            `x=(-b +- sqrt(b^2 – 4ac))/(2a)` 
        </div> 
        <div class="formulae-num">(99.1) </div>
    </div> 
    <div class="formulae-caption"> </div>
</div>

Code 22.8 Basic equation with shading HTML

It looks like this:

`x=(-b +- sqrt(b^2 – 4ac))/(2a)`

(99.1)

The formulae-caption div still exists (it gives spacing after the equation), but if no caption is required, just leave the div empty.

TThe class formulae-bkgd has been added to the formulae-container div element.

22.4.5 Inline equations

Equations can be placed directly in a line of text.

An inline equation does not need any formatting, there is no class associated with it, just add a <span>...</span> element and put the equation in it (underlined in red below):

inline equation html

<p class="hyp">Inline equations <span>`f(a) = 1/(2pii) oint f(z)/(z-a)dz`</span> are possibe too.

Code 22.9 Inline equation HTML

It looks like this:

Inline equations `f(a) = 1/(2pii) oint f(z)/(z-a)dz` are possibe too.

22.4.6 Formulae equation numbers

Equation numbers are entirely optional, the formulae-num div however is not; if equation numbers are not required, leave the div empty:

        <div class="formulae-num"></div>