subscript and superscript for the same element

user_230630 0
Viewed 16575

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!

xhtml css html
7 Answers

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

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

user_117445300

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.

user_19533660
Related