subscript and superscript for the same element - html

Question

Is there any way to add both subscript and and superscript to the same element? If I do
Sample Text<sub>Sub</sub><sup>Sup</sup>
the superscript appears after the subscript. One I idea I had is to do something like:
<table>
<tr>
<td rowspan='2' valign='center'>Sample Text</td>
<td>Sup</td>
</tr>
<tr>
<td>Sub</td>
</tr>
</table>
It seems to do the job but is quite ugly. Any better ideas?
Thanks!

Answer 1

This one is similar to CyberDudes approach, additionally it indents the following text depending on the width of sub and sup:
http://jsfiddle.net/jwFec/1/
Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />
<style>
.supsub {
display: inline-block;
}
.supsub sup,
.supsub sub {
position: relative;
display: block;
font-size: .5em;
line-height: 1.2;
}
.supsub sub {
top: .3em;
}
</style>

Answer 2

I'm no CSS guru but you could try something along the lines of http://jsfiddle.net/TKxv8/1/
There are a lot of hardcoded values and the effects on other elements around may only be found afterwards but it's a good place to start.
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

Answer 3

I use the following:
.supsub {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
vertical-align: middle;
}
<span class="supsub">
<span>sup</span>
<span>sub</span>
</span>

Answer 4

Well, you can specify position of sup relative to Sample Text's right border.
http://jsfiddle.net/a754h/

Answer 5

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.

Answer 6

On addition to the solution of CyberDude here there is a example that you can do using sup and sub tags and css with flexbox.
<div class="expression">
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
</div>
.expression {
display:flex;
align-items: center;
}
.supsub {
display: flex;
flex-direction: column;
margin-left: 2px;
}
.subscript {
color: green;
display:flex;
}
.superscript {
color: red;
display:flex;
}
You can see and test this here JsFiddle

Answer 7

It can be done very simply by using inline style as well. Specifically: style='position: relative; left: -0.4em;'
So an example would be: u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup>
One can vary the position by changing the value after left. It doesn't reproduce here, but it works fine otherwise.