WRITING MATHEMATICAL AND CHEMICAL EQUATIONS ON THE WEB WITH CSS

Writing mathematical and chemical equations on the Web with CSS

The double arrow in the equilibrium reaction

For some reason, unicode character ⇄ ‘RIGHTWARDS ARROW OVER LEFTWARDS ARROW’ (⇄) does not displayed properly in MS Internet Explorer 8.

C + O2 CO2

HTML Code:

<div class=”eq-c”>
C + O<sub>2</sub> <span class=”dblarrow”>&rarr;</span> CO<sub>2</sub>
</div>

CSS Code:

.dblarrow {
    font-size: 125%;
    top: -0.4ex;
    margin: 0 2px;
}
.dblarrow:after {
    content:"\2190";
    position: absolute;
    left: 0;
    top: 0.5ex;
}

 

How to display fractions in Web pages

To represent the illusion of a fraction, you superscript the numerator and subscript the denominator on either side of the fraction slash. The fraction slash character ⁄ (&frasl; or &#8260;) renders this a bit nicer than a regular slash.

 

211

HTML Code:

<sup>2</sup>&frasl;<sub>11</sub>

 

Here is a simple way to display fractions with the horizontal divider in a web page. This example uses the inline-block value to display “A over B” in HTML.

c(NaOH) =
n(NaOH) / V(NaOH)
= 1.2345 mol dm-3

HTML Code:

<div class=”eq-c”>
<i>c</i>(NaOH) =
<div class=”fraction”>
<span class=”fup”><i>n</i>(NaOH)</span>
<span class=”bar”>/</span>
<span class=”fdn”><i>V</i>(NaOH)</span>
</div>
= 1.2345 mol dm<sup>-3</sup>
</div>

CSS Code:

.fraction {
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

 

How to write a oxidation numbers above the elements in the equation

During a redox reaction, the total increase in the oxidation number must be equal to the total decrease in the oxidation number. This is the basic principle for balancing chemical equations. These codes will help you write the oxidation number of atoms in each compound above the symbol of the chosen element.

O:  Te+4O-22 H+16Te+6O-26 + 2e

R:  Cr+62O-272- + 6e 2Cr+33+

HTML Code:

<div class=”eq-c”>
<b>O: </b>
<span class=”sy-r”>Te<span class=”oxbr”>+4</span></span><span class=”sy”>O<span class=”oxbr”>-2</span></span><sub>2</sub>

<span class=”rarrow”>&rarr;<span class=”larrow”>&larr;</span></span>

<span class=”sy”>H<span class=”oxbr”>+1</span></span><sub>6</sub><span class=”sy-r”>Te<span class=”oxbr”>+6</span></span><span class=”sy”>O<span class=”oxbr”>-2</span></span><sub>6</sub> +
<span class=”sy-g”>2e<sup></sup></span>
</div>


<div class=”eq-c”>
<b>R: </b>
<span class=”sy-b”>Cr<span class=”oxbr”>+6</span></span><sub>2</sub><span class=”sy”>O<span class=”oxbr”>-2</span></span><sub>7</sub><sup>2-</sup> +
<span class=”sy-g”>6e<sup>-</sup></span>

<span class=”rarrow”>&rarr;<span class=”larrow”>&larr;</span></span>

2<span class=”sy-b”>Cr<span class=”oxbr”>+3</span></span><sup>3+</sup>
</div>

CSS Code:

.sy, 
.sy-r, 
.sy-g, 
.sy-b {
    position: relative;
    text-align: center;
}
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr, 
.oncapital, 
.onsmall {
    position: absolute;
    top: -1em;
    left: 0px;
    width: 100%;
    font-size: 70%;
    text-align: center;
}
.onsmall {
    top: -0.7em;
}

 

Vectors

A =
Δv / Δ t

HTML Code:

<div class=”eq-c”>
<span class=”sy”><i>A</i><span class=”oncapital”>&rarr;</span></span> =
<div class=”fraction”>
<span class=”fup”>&Delta;<span class=”sy”><i>v</i><span class=”onsmall”>&rarr;</span></span></span>
<span class=”bar”>/</span>
<span class=”fdn”>&Delta; <i>t</i></span>
</div>
</div>

CSS Code:

.sy {
    position: relative;
    text-align: center;
}
.oncapital, .onsmall {
    position: absolute;
    top: -1em;
    left: 0px;
    width: 100%;
    font-size: 70%;
    text-align: center;
}
.onsmall {
    top: -0.7em;
}

 

Limits and mass number

a =
lim Δ t→0
Δv / Δ t

146C → 147 N + ν

HTML Code:

<div class=”eq-c”>
<i>a</i> =
<div class=”limes”>
<span class=”overup”>lim</span>
<span class=”overdn”>&Delta; <i>t</i>&rarr;0</span>
<div class=”fraction”>
<span class=”fup”>&Delta;<i>v</i></span>
<span class=”bar”>/</span>
<span class=”fdn”>&Delta; <i>t</i></span>
</div>
</div>

 

<div class=”eq-c”>
<span class=”limes”><span class=”numup”>14</span><span class=”overdn”>6</span></span>C &rarr;
<span class=”limes”><span class=”numup”>14</span><span class=”overdn”>7</span>
</span>N + <span class=”sy”>&nu;<span class=”onsmall”>&ndash;</span></span>
</div>

CSS Code:

.limes {
    position: relative;
    display: inline-block;
    margin: 0 0.2em;
    vertical-align: middle; 
    text-align: center;
}
.limes > span { 
    display: block;
    margin:-0.5ex auto;
}
.limes span.numup,
.limes span.overdn {
    font-size: 70%;
}

 

Sum and integrals

S = 5 n=0
(x + 1)n / n
0 sinx dx = 0

HTML Code:

<div class=”eq-c”>
<i>S</i> =
<span class=”intsuma”>
<span class=”lim”>5</span>
<span class=”sum-frac”>&sum;</span>
<span class=”lim”><i>n</i>=0</span>
</span>
<div class=”fraction”>
<span class=”fup”>(<i>x</i> + 1)<sup><i>n</i></sup></span>
<span class=”bar”>/</span>
<span class=”fdn”><i>n</i></span>
</div>
</div>


<div class=”eq-c”>
<span class=”intsuma”>
<span class=”lim-up”>2&pi;</span>
<span class=”sum”>&int;</span>
<span class=”lim”>0</span>
</span>
sin<i>x</i> d<i>x</i> = 0
</div>

CSS Code:

.intsuma {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.intsuma > span {
    display: block;
    font-size: 70%;
}
.intsuma .lim-up {
    margin-bottom: -1.0ex;
}
.intsuma .lim {
    margin-top: -0.5ex;
}
.intsuma .sum {
    font-size: 1.5em;
    font-weight: lighter;
}
.intsuma .sum-frac {
    font-size: 1.5em;
    font-weight: 100;
}

 

Radicals

381
y = x2 + 6

HTML Code:

<div class=”eq-c”>
<span class=”radical”><span class=”n-root”>3</span>&radic;</span><span class=”radicand”>81</span>
</div>


<div class=”eq-c”>
<i>y</i> =
<span class=”radical”>&radic;</span><span class=”radicand”><i>x</i><sup>2</sup> + 6</span>
</div>

CSS Code:

.radical {
    position: relative;
    font-size: 1.6em;
    vertical-align: middle;
}
.n-root {
    position: absolute;
    top: -0.333em;
    left: 0.333em;
    font-size: 45%;
}
.radicand { 
    padding: 0.25em 0.25em;
    border-top: thin black solid;
}

Leave a Reply

Your email address will not be published. Required fields are marked *