9

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?

Sinan Ünür
  • 116,958
  • 15
  • 196
  • 339
netimen
  • 4,199
  • 6
  • 41
  • 65

4 Answers4

4

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.

Dragonfly
  • 814
  • 8
  • 12
2

There are many ways you can do this with CSS, and each has their pros and cons. One way would be to use relative positioning. A quick example might work like this:

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

And the CSS to go along with this:

span.fraction { }

/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator { 
  position:relative;
  top:-0.5em;
}

span.fraction span.denominator {
  position:relative;
  top:0.5em;
  left:-0.5em; /* This will vary with font... */
}

This particular example would work better if you use a monospaced font.

Zack The Human
  • 8,373
  • 7
  • 39
  • 60
  • 1
    But here the offset to the left depends on the size of the superscript and subscript. But what if nominator is 31234 and denominator is 56547? Is there a unified decision which works not depending on the size of superscript and subscript? – netimen Oct 17 '09 at 10:25
  • @netimen This is a good point and I thought of it after I whipped up the example above. In short: no, there is no magic value. This is one occasion where the CSS3 Ruby module might come in handy. – Zack The Human Oct 17 '09 at 15:50
  • @netimen It would be possible to calculate the correct offset using JavaScript and then apply it to each instance of super/subscript. What is it that you're trying to represent? Fractions? Chemical compounds? – Zack The Human Oct 17 '09 at 15:59
  • I see. May be I could use tables for this task? @Zack I'm trying to represent connections between words in a sentence) – netimen Oct 17 '09 at 16:32
  • While it goes against my "web developer instincts" I think that using a table might be the best thing you could do here, especially if you want the numbers "centered" with each other. – Zack The Human Oct 18 '09 at 00:59
  • Thank you! but how do I inline a table into a text row? – netimen Oct 18 '09 at 10:33
  • It worked for me, but the spacing was kind of ugly (I read the font comment). Dragonfly's solution worked better with the spacing not varying with font. – Anonymous Pi Feb 18 '14 at 02:04
2

Use the CSS table style (except for IE8 and below). HTML:

<span class="over-under">
  <span class="over">sup</span>
  <span class="under">sub</span>
</span>

CSS:

span.over-under {
  position: relative;
  top: 1em;
  display: inline-block;
}
span.over-under > .over {
  display: table-row;
}
span.over-under > .under {
  display: table-row;
}

Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/

Besides being simpler than relative position tweaks, this solution avoids layout distortions that arise from those alternatives. See, e.g., https://jsfiddle.net/FredLoney/da89nyk2/1/.

user3431117
  • 21
  • 2
-1

Well, you can't do that with plain vanilla HTML. Like it's been mentioned, use CSS. But you will want some positioning aswell!