PISANJE MATEMATIČKIH I KEMIJSKIH JEDNADŽBI NA WEBU UZ POMOĆ CSS-a
Dvostruka strelica ♦
Razlomci ♦
Oksidacijski broj ♦
Vektori ♦
Limesi i maseni broj ♦
Suma i integrali ♦
Korijeni
Dvostruka strelica u ravnotežnim reakcijama
Zbog nekog razloga, unikod znak ⇄ 'RIGHTWARDS ARROW OVER LEFTWARDS ARROW' (⇄) se ne prikazuje u MS Internet Exploreru 8.
C + O2 → CO2
HTML Kod:
<div class="eq-c">
C + O<sub>2</sub> <span class="dblarrow">→</span> CO<sub>2</sub></div>
CSS Kod:
.dblarrow {
font-size: 125%;
top: -0.4ex;
margin: 0 2px;
}
.dblarrow:after {
content:"\2190";
position: absolute;
left: 0;
top: 0.5ex;
}
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' ⁄ (⁄ ili ⁄), na web stranici izgleda nešto ljepše od obične kose crte.
2⁄11
HTML Kod:
<sup>2</sup>⁄<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:
<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 Kod:
.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;}
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:
<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>
CSS Kod:
.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;
}
Vektori
A→ =
Δv→
Δ t
HTML Kod:
<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>
CSS Kod:
.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;
}
Limesi i maseni broj
a =
lim
Δ t→0
Δv
Δ t
146C →
147
N + ν–
HTML Kod:
<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>
CSS Kod:
.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%;
}
Suma i integrali
S =
5
∑
n=0
(x + 1)n
n
2π
∫
0
sinx dx = 0
HTML Kod:
<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>
CSS Kod:
.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;
}
Korijeni
3√81
y =
√x2 + 6
HTML Kod:
<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>
CSS Kod:
.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;
}
Š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.
W3C Link Checker
Bibliografija:
- "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>
Citiranje ove stranice:
Generalić, Eni. "Pisanje matematičkih i kemijskih jednadžbi na Webu pomoću CSS-a." EniG. Periodni sustav elemenata. KTF-Split, 18 Jan. 2024. Web. {Datum pristupa}. <https://www.periodni.com/hr/matematicke_i_kemijske_jednadzbe_na_webu.html>.
Copyright © 1998-2024 by Eni Generalic. Sva prava pridržana. | Bibliografija | Disclaimer