Kode HTML untuk Penulisan Isotop dan Ion

Rabu, 26 September 2018 edit

Menulis simbol atau lambang isotop atau ion bila dilakukan dengan aplikasi olah kata tentu bukan hal sulit. Tinggal klak-klik saja jadi sesuai keinginan. Sedikit berbeda bila ingin menuliskan pada website yang harus menggunakan kode HTML. Karena kemalasan biasa saya hanya menuliskan sebagaimana saya bisa, dan berharap pembaca bisa memahaminya karena biasanya pada tulisan diberi keterangan.




Dahulu kalau saya ingin menuliskan isotop C 12 dengan nomor atom 6 biasa saya tulis <sub>6</sub>C<sup>12</sup> sehingga tampilan seperti berikut: 6C12. Saat itu memang belum mencari cara menuliskan agar posisi nomor massa dan nomor atom berada di kiri lambang unsur yang tersusun vertikal.

Sama halnya bila ingin menuliskan anion sulfat dan sejenisnya, biasa saya tulis dengan kode SO<sub>4</sub><sup>2-</sup> sehingga tampilan menjadi SO42-. Padahal selama ini maunya posisi angka indeks 4 dan muatan berada pada posisi vertikal muatan tepat berada di atas angka indeks itu.

Memang pada blog ini sudah bisa menggunakan Latex via Mathjax, namun hasilnya menjadi kurang rapi karena font dan ukurannya menjadi kurang proporsional, meskipun kalau dipaksakan tetap bisa. Selain itu waktu muat hingga tampil menjadi sedikit lebih lama. Kalau menggunakan kode html rasanya jauh lebih cepat waktu muatnya dan tampilan seragam dengan font yang digunakan. Sekali lagi karena kemalasan mengutak-atik kode saja ini.

Sekarang mulai dari tulisan ini saya akan menggunakan CSS yang menjadikan penulisan isotop dan ion pada blog ini menjadi lebih bagus dan lebih cepat.

Bagi pemula, seperti saya, yang mau menggunakan dan mencoba untuk kebutuhan serupa monggo diikuti.

Contoh penulisan isotop: 39
19
K

Contoh penulisan ion: SO2–
4


Pertama dibuat lebih dulu kode style seperti berikut, tuliskan dalam postingan, boleh di awal tulisan atau di akhir:
<style>
.kiri{display:inline-block;margin-bottom:-0.3em;vertical-align:-0.4em;line-height:1.0em;font-size:80%;text-align:right; color:red}
.kanan{display:inline-block;margin-bottom:-0.3em;vertical-align:-0.4em;line-height:1.0em;font-size:80%;text-align:left}
.spsb{font-size:inherit;line-height:inherit;vertical-align:baseline}
</style>


Cara penggunaannya pada editor mode kode (html) seperti berikut ini, dan hasilnya seperti 39
19
K dan SO2–
4

Contoh penulisan isotop: <span class="kiri"><sup class="spsb">39</sup>
<sub class="spsb">19</sub></span>K

Contoh penulisan ion: SO<span class="kanan"><sup class="spsb">2–</sup>
<sub class="spsb">4</sub></span>

Bagaimana bila ingin membuat simbol seperti ini, 200
80
Hg2+
2


Sila gabung class kiri dan kanan.
<span class="kiri"><sup class="spsb">200</sup>
<sub class="spsb">80</sub></span>C<span class="kanan"><sup class="spsb">2+</sup>
<sub class="spsb">2</sub></span>

Demikian tutorial singkat semoga membantu rekan guru kimia yang ingin tahu (bila belum tahu tentu) serta siapapun yang bergerak dalam tulis menulis simbol kimia. Bila ada saran agar cara tersebut lebih praktis silakan tulis pada kotak komentar. Terima kasih.

Bagikan di

1 komentar:

  1. Saya sudah letakkan script dan uji coba, kok tidak bisa ya Pak. tidak sejajar, bahkan yg sub nya jauh.
    mohon berbagi tips nya ya pak.

    BalasHapus

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info