HTML Superscript & Subscript Issue

user_5904811 0
Viewed 1524

Adding superscript and subscript for a given text doesn't work as expected. However it works exactly as expected before the text.

Chemical elements use superscripts and subscripts before and after an atomic symbol to specify mass number, atomic number, charge, and atom count. An accurate depiction is given in the attached image. The code I'm using is given below.

<!DOCTYPE html>
<html>
 <style>
    .right-align {
   display: inline-block;
   margin-bottom: -0.3em;
   vertical-align: -0.4em;
   line-height: 1.0em;
   font-size: 80%;
   text-align: right;
    }

    .left-align {
   display: inline-block;
   margin-bottom: -0.3em;
   vertical-align: 0.8em;
   line-height: 1.0em;
   font-size: 80%;
   text-align: left;
    }

    .super-sub {
   font-size: inherit;
   line-height: inherit;
   vertical-align: baseline;
    }
 </style>


 <body>
  <span style="white-space: wrap !important;">
   <span class="right-align">
    <sup class="super-sub">238</sup>
    <br/>
    <sub class="super-sub">92</sub>
   </span>U<span class="left-align">
    <sup class="super-sub">3-</sup>
    <br/>
    <sub class="super-sub">1</sub>
   </span>
  </span>
 </body>
</html>

There's no error message. The first image shows how the result must be formatted. The second image how the image is actually formatted (number 1 pushes the 3-).

Expected result must follow the format given in this image

In the actual image the atom count 1 pushes the charge 3- up

subscript superscript css html
2 Answers

You can wrap the letter U inside another span and then adjust the vertical-align of the left align. I have increased the font-size for better readability and also changed the left and right align classes.

<!DOCTYPE html>
<html>
<html>
<style>
  .left-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: right;
  }
  
  .right-align {
    display: inline-block;
    margin-bottom: -0.3em;
    vertical-align: -0.4em;
    line-height: 1.0em;
    font-size: 150%;
    text-align: left;
  }
  
  .center-align {
    font-size: 150%;
    margin: 0.2em;
  }
  
  .super-sub {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
  }
</style>

</html>

<body>
  <span style="white-space: wrap !important;">
            <span class="left-align">
                <sup class="super-sub">238</sup><br/>
                <sub class="super-sub">92</sub>
            </span><span class="center-align">U</span><span class="right-align">
                <sup class="super-sub">3-</sup><br/>
                <sub class="super-sub">1</sub>
            </span>
  </span>

</html>

user_48139130

You might want simplify things using flex:

body {
  font-size: 48px
}

.element {
  display: inline-flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-end;
  height: 1.5em;
  line-height: 1.3
}

.element > * {
  font-variant: normal;
  font-size: .75em;
  line-height: 1;
}

.element>*:nth-child(3),
.element>*:nth-child(4) {
  align-self: flex-start
}
<span class="element">
  <sup>238</sup>
  <sub>92</sub>
  U
  <sup>3-</sup>
  <sub>1</sub>
</span>

user_57243030
Related