How to write chemical formulas in HTML?

Question

How to write the below ion in HTML?

I already tried the below code but it doesn't look good

<sup>119</sup><sub>50</sub>Sn<sup>2+</sup>

¹¹⁹₅₀Sn²⁺

Answer 1

I don't know if it's possible with plain HTML, but you can use CSS to position elements relative to each other. Run the following code snippet.

.supsub {position: absolute}
.subscript {display:block; position:relative; left:5px; top: -5px}
.superscript {display:block; position:relative; left:0px; top: -5px}
.base {position:relative; left: 20px;}

<span class='supsub'><sup class='superscript'>119</sup><sub class='subscript'>50</sub></span><span class='supsub'><span class='base'>Sn<sup>2+</sup></span>

You may need to play with the left and top values to get things positioned exactly as you like. You may also need to place the whole HTML chunk in its own span or div so the positioning elements don't interact with other elements on your page.

Answer 2

You can use MathML, which may be a bit verbose. This is technically not HTML, but XML. However, it is supported natively by some browsers, such as Safari and Firefox. Unfortunately, Chrome does not support this, but by including a MathJax script, it can be converted to pure HTML.

<math class="chem">
  <mmultiscripts>
    <mi>Sn</mi>                            <!-- base expression -->
    <none />                               <!-- postsubscript -->
    <mrow><mi>119</mi><mo>+</mo></mrow>    <!-- postsuperscript -->
    <mprescripts />
    <mn>50</mn>                            <!-- presubscript -->
    <mn>119</mn>                           <!-- presuperscript -->
  </mmultiscripts>
</math>

<hr>

<!-- For browsers that do not support MathML: -->
<script id="s"></script><button onclick="s.src='https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=MML_CHTML'">Load MathJax Script</button>

More on mmultiscripts here: https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mmultiscripts

Some MathML examples: https://www.w3.org/Math/XSL/csmall2.xml