de en fr hr it es

PISANJE MATEMATIČKIH I KEMIJSKIH JEDNADŽBI NA WEBU
UZ POMOĆ CSS-a

 

Dvostruka strelica u ravnotežnim reakcijama

Zbog nekog razloga, unikod znak ⇄ 'RIGHTWARDS ARROW OVER LEFTWARDS ARROW' (⇄) se ne prikazuje u MS Internet Exploreru 8.

CO2 →← C + O2
HTML Kod: CSS Kod:
<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;
	}

 

Kako prikazati razlomke na web stranici

Kako bi stvorili iluziju razlomka brojnik stavite u eksponent a nazivnik u indeks s obje strane kose crte. Kosa razlomačka crta, znak 'FRACTION SLASH' ⁄ (&frasl; ili &#8260;), na web stranici izgleda nešto ljepše od obične kose crte.

  HTML Kod:
2⁄11 <sup>2</sup>&frasl;<sub>11</sub>

Ovdje je dan jednostavan način za prikaz razlomaka s vodoravnom crtom na web stranici. Ovaj primjer koristi inline-blok svojstvo CSS kutije za prikaz izraza "A kroz B" u HTML-u.

c(NaOH) =
n(NaOH) / V(NaOH)
= 1.2345 mol dm-3
HTML Kod: CSS Kod:
<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;}

 

Kako napisati oksidacijski broj iznad elemenata u reakciji

Oksidacijom se oksidacijski broj atoma povećava, a redukcijom smanjuje. Pri redoks-reakciji uvijek se događa i oksidacija i redukcija, tj. ukupna promjena oksidacijskog broja atoma koji se oksidiraju mora biti jednaka ukupnoj promjeni oksidacijskog broja atoma koji se reduciraju. To je osnovni princip za uravnoteženje kemijske jednadžbe. Ovi kodovi će vam pomoći napisati oksidacijske brojeve iznad simbola odabranih elemenata.

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

 

Vektori

A→ =
Δv→ / Δ t
HTML Kod: CSS Kod:
<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>
 
.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%;
	}

 

Limesi

a =
lim Δ t→0
Δv / Δ t
146C → 147 N + ν–
HTML Kod: CSS Kod:
<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>
 
.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%;
}

 

Suma i integrali

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

 

Korijeni

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

 

Što je što u CSS kutiji

CSS model kutije je u stvari okvir koji omata HTML elemente, a sastoji se od: margina (margin), okvira (border), odmaka (padding) i stvarnog sadržaja.

CSS box: margins, borders, paddings

 

W3C Link Checker

W3C Link Checker

 

Bibliografija: