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

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}