www.periodni.com
WRITING MATHEMATICAL AND CHEMICAL EQUATIONS
ON THE WEB WITH CSS
The double arrow in the equilibrium reaction
For some reason, unicode characte ⇄ 'RIGHTWARDS ARROW OVER LEFTWARDS ARROW' (⇄) does not displayed properly in MS Internet Explorer 8.
CO2 →← C + O2
| HTML Code: | CSS Code: |
|---|---|
|
<div class="eq-c">
CO<sub>2</sub> <span class="rarrow">→<span class="larrow">←</span></span> C + O<sub>2</sub></div>
|
.rarrow {
position: relative;
font-size: 125%;
font-family: serif;
top: -0.5ex;
margin: 0px 2px;
}
.larrow {
position: absolute;
left: 0px;
top: 0.8ex;
}
|
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 ⁄ (⁄ or ⁄) renders this a bit nicer than a regular slash.
| HTML Code: | |
|---|---|
| 2⁄11 | <sup>2</sup>⁄<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: | CSS 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>
|
.fraction {
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.01em;
text-align: center;
}
.fraction > span {
display: block;
padding: 0.2em;
}
.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: | CSS 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">→<span class="larrow">←</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">→<span class="larrow">←</span></span> 2<span class="sy-b">Cr<span class="oxbr">+3</span></span><sup>3+</sup> </div>
|
.sy, .sy-r, .sy-g, .sy-b {
position: relative;
padding-left: 1px;
font-size: 110%;
font-weight: 500;
text-align: center;
}
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr {
position: absolute;
top: -1em;
left: 0px;
width: 100%;
font-family: serif;
font-size: 70%;
text-align: center;
}
.eq-l, .eq-c {
position: relative;
padding: 15px 50px;
font-size: 11pt;
font-weight: 500;
}
.eq-l {text-align: left;}
.eq-c {text-align: center;}
|
Vectors
A→ =
Δv→
Δ t
| HTML Code: | CSS Code: |
|---|---|
|
<div class="eq-c">
<span class="sy"><i>A</i><span class="oncapital">→</span></span> =<div class="fraction"> <span class="fup">Δ<span class="sy"><i>v</i><span class="onsmall">→</span></span></span> <span class="bar">/</span> <span class="fdn">Δ <i>t</i></span> </div> </div>
|
.sy {
position: relative;
padding-left: 1px;
font-size: 11pt;
font-weight: 500;
text-align: center;
}
.sy span.oncapital {
position: absolute;
top: -1em;
left: 0.2em;
font-size: 70%;
}
.sy span.onsmall {
position: absolute;
top: -0.6em;
left: 0.2em;
font-size: 70%;
}
|
Limits
a =
lim
Δ t→0
Δv
Δ t
146C →
147
N + ν–
| HTML Code: | CSS Code: |
|---|---|
|
<div class="eq-c">
<i>a</i> =<div class="limes"> <span class="overup">lim</span> <span class="overdn">Δ <i>t</i>→0</span> <div class="fraction"> <span class="fup">Δ<i>v</i></span> <span class="bar">/</span> <span class="fdn">Δ <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 → <span class="limes"><span class="numup">14</span><span class="overdn">7</span> </span>N + <span class="sy">ν<span class="onsmall">–</span></span> </div>
|
.limes {
display: inline-block;
position: relative;
margin: 0 2px;
vertical-align: middle;
text-align: center;
}
.limes > span {
display: block;
}
.limes span.numup {
font-size: 70%;
}
.limes span.overdn {
font-size: 70%;
}
|
Sum and integrals
S =
5
∑
n=0
(x + 1)n
n
2π
∫
0
sinx dx = 0
| HTML Code: | CSS Code: |
|---|---|
|
<div class="eq-c">
<i>S</i> = <span class="intsuma"> <span class="lim">5</span> <span class="sum-frac">∑</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π</span> <span class="sum">∫</span> <span class="lim">0</span> </span> sin<i>x</i> d<i>x</i> = 0 </div>
|
.intsuma {
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
margin-bottom: 0.5ex;
}
.intsuma .lim, .intsuma .lim-up {
display: block;
font-size: 75%;
text-align: center;
}
.intsuma .lim-up {
margin-bottom: 0;
margin-left: 0.8ex;
}
.intsuma .lim {margin-bottom: -0.6ex;}
.intsuma .sum {font-size: 1.2em;}
.intsuma .sum-frac {font-size: 2em;}
|
Radicals
3√81
y =
√x2 + 6
| HTML Code: | CSS Code: |
|---|---|
|
<div class="eq-c">
<span class="radical"><span class="n-root">3</span>√</span><span class="radicand">81</span></div>
<div class="eq-c">
<i>y</i> = <span class="radical">√</span><span class="radicand"><i>x</i><sup>2</sup> + 6</span> </div>
|
.n-root {
position: relative;
top: -1.3em;
left: 1.9ex;
font-size: 45%;
}
.radical {
font-size: 1.7em;
vertical-align: middle;
}
.radicand {
padding: 0.5ex;
border-top: thin black solid;
}
|
What is what in CSS box
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
W3C Link Checker
Bibliography:
- "CSS3 Dropdown Menu." 23 Feb. Web Designer Wall. 2010. 27 May. 2011. <http://webdesignerwall.com/tutorials/css3-dropdown-menu>
- "CSS Tutorial." W3Schools. 22 May. 2011. <http://www.w3schools.com/css/default.asp>
- Steve White. "Math in HTML with CSS." 7 Jul. 2011. <http://www.zipcon.net/~swhite/docs/math/math.html>
- "A MathML for CSS Profile." 7 June 2011, W3C. 8 Jul. 2011. <http://www.w3.org/TR/WD-html40-970708>
- "Unicode Character 'RIGHTWARDS ARROW OVER LEFTWARDS ARROW' (U+21C4)." FileFormat.Info. 14 Jul. 2011. <http://www.fileformat.info/info/unicode/char/21c4/index.htm>
| Scientific calculator for chemists | ||
| Download printable materials |
|
|
|
Free software for Windows |
| Periodic Table of the Elements | ||
Citing this page:
Generalic, Eni. "Writing mathematical and chemical equations on the Web with CSS." EniG. Periodic Table of the Elements. 16 May 2013. KTF-Split. {Date of access}. <http://www.periodni.com/mathematical_and_chemical_equations_on_web.html>.
Copyright © 2013 by Eni Generalic. All rights reserved. | Disclaimer