Menulis Persamaan Matematika dan Kimia di Web

$Menulis Persamaan Matematis dan Kimia di Web$

Assalamu'alaikum Wr. Wb. Saya hadir kembali membagikan sebuah postingan berisi tutorial kecil. Biasanya di web orang lain, sang penulis memposting soal atau materi pelajaran yang berisikan persamaan-persamaan, seperti persamaan matematika, kimia, fisika ataupun yang lainnya. Persamaan tersebut cukup sulit untuk diposting dalam bentuk tulisan, sehingga penulisnya memposting persamaannya dalam bentuk gambar/screenshot dari tulisan tersebut. Pada kesempatan kali ini saya membagikan postingan mengenai bagaimana cara menulis persamaan tersebut tanpa dalam bentuk gambar. Ini dilakukan dengan perpaduan penggunaan HTML dan CSS.

Panah ganda dalam reaksi kesetimbangan

Untuk beberapa alasan, karakter unicode ⇄ 'panah kiri kanan' (⇄) tidak ditampilkan dengan baik/benar di MS Internet Explorer 8.

C + O₂ → CO₂

Kode HTML

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

Menampilkan bentuk pecahan (fraction)

n(NaOH) =

M(NaOH)V(NaOH)

= 1.234,567 mol

Kode HTML

<div class="eq">
<i>n</i>(NaOH) =
<div class="fraction"><i>M</i>(NaOH)<span class="fdn"><i>V</i>(NaOH)</span></div>
= 1.234,567 mol
</div>

Menulis bilangan oksidasi diatas unsur-unsurnya dalam persamaan

Tulisannya diberi warna, biar bisa membedakannya.

O: Te+4O-2₂ → H+1₆Te+6O-2₆ + 2e^-

R: Cr+6₂O-2₇^2- + 6e^- → 2Cr+3³⁺

Kode HTML

<div class="eq">
<b>O: </b> 
<span class="ro-r">Te<span class="oxbr">+4</span></span><span class="ro">O<span class="oxbr">-2</span></span><sub>2</sub>
&rarr; 
<span class="ro">H<span class="oxbr">+1</span></span><sub>6</sub><span class="ro-r">Te<span class="oxbr">+6</span></span><span class="ro">O<span class="oxbr">-2</span></span><sub>6</sub> + 
<span class="ro-g">2e<sup>-</sup></span>
</div>

<div class="eq">
<b>R: </b> 
<span class="ro-b">Cr<span class="oxbr">+6</span></span><sub>2</sub><span class="ro">O<span class="oxbr">-2</span></span><sub>7</sub><sup>2-</sup> + 
<span class="ro-g">6e<sup>-</sup></span>
&rarr;
2<span class="ro-b">Cr<span class="oxbr">+3</span></span><sup>3+</sup>
</div>

Penggunaan <sup>...</sup> berarti superscript untuk teks berada diatas garis teks normal, seperti contoh berikut: x^atas. Penggunaan <sub>...</sub> berarti subscript untuk teks berada dibawah garis teks normal, seperti contoh berikut: x_bawah. Penggunaan kode html tersebut cocok untuk menulis persamaan matematika.

Untuk kode CSS keseluruhannya

/* sub and superscript */
sub, sup {font-size:75%;line-height:0;}
 
/* Untuk Persamaan */
.eq{line-height:1.4;font-size:1.1em;text-align:center;}

/* Arrow Kiri Kanan*/
.dblarrow {font-size:125%;margin:0 2px;position:relative;}
.dblarrow:after {content:"\2190"; /* &larrow; */ position:absolute;left:0;top:0.3ex;}

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

/* RedOks */
.ro, .ro-r, .ro-g, .ro-b{position:relative;text-align:center;}
.ro-r {color:#f00;}
.ro-g {color:#4f8c4f;}
.ro-b {color:#00f;}
.oxbr {position:absolute;top:-1em;left:0px;width:100%;font-size:0.60em;text-align:center;}

Jika persamaan tersebut disalin (copy), misalnya paste di MS. Word, maka tulisan/persamaannya hancur berantakan. hehe :)

Untuk selanjutnya bisa dikembangkan sendiri. Demikian postingan kali ini, semoga bermanfaat.