Penempatan Bilangan Oksidasi di Atas Setiap Unsur

Kamis, 27 September 2018 edit

Pada pokok bahasan reaksi redoks ada keharusan menuliskan bilangan oksidasi (biloks). Penulisan manual dengan menempatkan biloks di atas atau di bawah setiap unsur tentu tidak repot. Bahkan pengetikan menggunakan aplikasi olah kata pun bisa dilakukan "secara manual" pula. Tentu saja masih belum praktis. Demikian pula bila ingin menuliskan dalam bentuk laman di blog atau website pribadi. Bila tidak hati-hati penempatan biloks-biloks bisa berantakan dan tentu menjadi tidak menolong bagi yang hendak memahaminya.



Dari hasil browsing diperoleh cara melalui beberapa contoh tampilan. Dari contoh tersebut kemudian saya kombinasikan dengan tutorial yang lalu, sehingga tampilan dari contoh tersebut menjadi berbeda, berbedanya adalah pada penempatan muatan ion. Bila pada contoh muatan ion murni hanya menggunakan tag HTML <sup> pada tulisan saya ini sudah ditambahkan CSS. Cara yang saya buat pada kiriman ini full menggunakan html-css, tidak menggunakan MathJax. Tujuan tidak menggunakan Mathjax adalah untuk mencari alternatif dan load tampilan laman menjadi lebih cepat dan rapi.

Oh ya tutorial ini diperuntukkan yang sudah sedikit mengerti bahasa HTML dan CSS saja. Bila ingin memulai dari nol boleh langsung meluncur ke www.w3schools.com.

Ok, berikut ini yang dapat diutak-atik sehingga penempatan biloks setiap unsur sesuai keinginan, ditempat di atas setiap unsur.
Saya contohkan S+6O–22–
4

Hanya ingin menuliskan seperti itu saja memang membutuhkan skrip yang panjang. Yah terasa panjang, bahkan sangat panjang menurut orang yang belum biasa bermain dengan skrip-skrip.

Pada text editor mode html (saya menggunakan blogger) bisa di tuliskan kode:
<span style="font-family: Times, serif;"><span class="unsur">S<span class="bo">+6</span></span><span class="unsur">O<span class="bo">–2</span></span><span class="kanan"><sup class="spsb">2–</sup>
<sub class="spsb">4</sub></span></span>

Jangan lupa membuat CSS yang dapat ditaruh di tempat lain pada kiriman (postingan). Agar penempatan seperti yang tertampil. Silahkan kode dimodifikasi seperlunya. Untuk tujuan tersebut dibuat class-class pada CSS. Pertama dibuat class "dot unsur" untuk mengatur posisi setiap unsur beserta rataannya kemudian diikuti dengan class "dot bo" untuk penempatan biloks, bila diperlukan sila ganti warna sesuai keinginan. Oh ya berikutnya adalah CSS hasil salin pada tutorial sebelumnya.

Pada tulisan ini saya buat sebagai berikut:
<style>
<!-- Pengaturan posisi unsur -->
.unsur {
    position: relative;
    text-align: center;
}

<!-- Pengaturan posisi biloks -->
.bo  {
 position: absolute;
 top: -1.5em;
 left: 0px;
 width: 100%;
 font-size: 0.6em;
 text-align: center;
 letter-spacing: -1px;
 color:blue;
}

<!-- Pengaturan posisi nomor atom/nomor massa di kiri -->
.kiri {
display:inline-block;
margin-bottom:-0.3em;
vertical-align:-0.4em;
line-height:1.0em;
font-size:80%;
text-align:right;
color:red
}

<!-- Pengaturan muatan/indeks di kanan-->
.kanan {
display:inline-block;
margin-bottom:-0.3em;
vertical-align:-0.4em;
line-height:1.0em;
font-size:80%;
text-align:left
}

<!-- Pengaturan muatan/indeks -->
.spsb {
font-size:inherit;
line-height:inherit;
vertical-align:baseline
}
</style>

Contoh lain sedikit lebih panjang:

S+4O–22–
3
+ Cr+62O–22–
7
Cr+33+ + S+6O–22–
4

Demikian tutorial singkat semoga dapat dimanfaatkan buat rekan yang membutuhkan.

Bagikan di

Tidak ada komentar:

Posting Komentar

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