HTML: can I place subscript text right under the superscript?

Question

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?

Answer 1

Dont use the tags. Use CSS.

Check out this link

Answer 2

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

Answer 3

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.