Writing a chemical formula without using MathML

HTML & CSS
1

I want to write a chemical formula without using MathML. The subscript is showing up in the right place but the superscript is too far to the left of the symbol U for Uranium.

<sup>235</sup><sub>92</sub>U

The number on top is the mass number and the number on the bottom is the atomic number.

2

Here’s my attempt:


Someone may come up with a better way :grinning:

Note: as it stands, the text for mass number and atomic number is smaller than that regarded as being of sufficient size for legibility.

It’s easy to shift the mass number and/or atomic number using position:relative but that tends to leave unwanted gaps. I have include the text "Element " to demonstrate that there are no unwanted gaps by using CSS Flexbox.

4 Likes
3

Here’s my attempt, I’m not sure it’s better but it’s another way.

It eliminates the relative positioning and uses vertical-align. An inline-table and some floats for the prescripts.

I’ve never had any need to write MathML but I did a quick crash course on it.
W3C Math Home
Presentation Markup

I will say though, if I had some extensive equations to write I would certainly take advantage of it as it has it’s own built in descriptive elements that are styled by the browser defaults. That’s worth a lot right there.

However If you just have one simple expression to write as shown with the Uranium example then it my be worthwhile to roll your own.

I could have reduced my styles but I was trying to get close to the MathML default styling.

Screenshot


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.prescripts {
  display: inline-table; /*contain floats*/
  vertical-align: middle;
  margin-right: 1px; /*no whitespace on i element*/
}
.prescripts sup,
.prescripts sub {
  float: right;
  clear: right;
  font-size: .7em;
  line-height: 1;
}
.prescripts, .prescripts+i {font-family:'Cambria Math'}
</style>

</head>
<body>

<p>Element:
  <span class="prescripts">
    <sup>235</sup>
    <sub>92</sub>
  </span><i>U</i>
</p>

<p>Element:
  <math xmlns='http://www.w3.org/1998/Math/MathML'>
    <mmultiscripts>
      <mi>U</mi>
      <mprescripts/><mi>92</mi><mi>235</mi>
    </mmultiscripts>
  </math>
</p>

</body>
</html>
3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.