Search code examples
htmlcsssubscriptsuperscript

HTML Superscript & Subscript Issue

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

Solution

  • 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>