de en fr hr it es

ÉCRIRE DES ÉQUATIONS MATHÉMATIQUES ET CHIMIQUES
SUR LE WEB AVEC LE CSS

 

La double flèche de l'équation-bilan

CO2 →← C + O2
HTML Codage: CSS Codage:
<div class="eq-c">
CO<sub>2</sub> <span class="rarrow">&rarr;<span class="larrow">&larr;</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;
	}

 

Comment écrire des fractions sur le Web

  HTML Codage:
2⁄11 <sup>2</sup>&frasl;<sub>11</sub>
c(NaOH) =
n(NaOH) / V(NaOH)
= 1.2345 mol dm-3
HTML Codage: CSS Codage:
<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;}

 

Écrire les nombres d'oxydation des éléments

O:  Te+4O-22 →← H+16Te+6O-26 + 2e-
R:  Cr+62O-272- + 6e- →← 2Cr+33+
HTML Codage: CSS Codage:
<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>
 
.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;}

 

Somme et intégrales

S = 5 ∑ n=0
(x + 1)n / n
2π ∫ 0 sinx dx = 0
HTML Codage: CSS Codage:
<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>
 
.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;}

 

Racines

3√81
y = √x2 + 6
HTML Codage: CSS Codage:
<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>
 
.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;
	}

 

Qui fait quoi dans la boîte CSS

CSS box: margins, borders, paddings

 

W3C Link Checker

W3C Link Checker

 

Bibliographie: