HTML: can I place subscript text right under the superscript?

html

Solution

Here's a clean solution. Create two CSS classes:

.nobr {
   white-space: nowrap;
}
.supsub {
   display: inline-block;
   margin: -9em 0;
   vertical-align: -0.55em;
   line-height: 1.35em;
   font-size: 70%;
   text-align: left;
}

You might already have the "nobr" class as a <nobr> replacement. Now to express the molecular formula for sulfate, use the "supsub" class as follows:

<span class="nobr">SO<span class="supsub">2-<br />4</span></span>

That is, enclose your superscript/subscript within the "supsub" class, and put a <br /> between them. If you like your superscripts/subscripts a bit larger or smaller, then adjust the font size and then tinker with the vertical-align and line-height. The -9em in the margin setting is to keep the superscripts/subscripts from adding to the height of the line containing them; any big value will do.

Problem

I have a word, which has both superscript and subscript. Now I render it like this `word<sub>1</sub><sup>2</sup>` And get the following: ``` word12. ``` How can I put the subscript exactly under the superscript?

Original source