CODEWITHSUNDEEP
htmlcssxhtml
Amati
Amati

Reputation: 1532

subscript and superscript for the same element

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!

Upvotes: 27

Views: 21704

Answers (7)

user1953366
user1953366

Reputation: 1611

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.

Upvotes: 0

Ashwin
Ashwin

Reputation: 7637

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>

Upvotes: 9

Math&#237;as Padula
Math&#237;as Padula

Reputation: 75

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

Upvotes: 1

Thomas
Thomas

Reputation: 171

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>

Upvotes: 17

Dragonfly
Dragonfly

Reputation: 804

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.

Upvotes: 2

CyberDude
CyberDude

Reputation: 8949

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}

Upvotes: 13

Nikita Rybak
Nikita Rybak

Reputation: 67986

Well, you can specify position of sup relative to Sample Text's right border.

http://jsfiddle.net/a754h/

Upvotes: 6

Related Questions