Suppose I need to write something with captions in the upper and lower index, the equation of the electronic balance of a certain reaction to put in a blog, for example. You can, of course, write this:

2NO <sub>3</sub> <sup>-</sup>

But, it is expected, the browser will arrange the text in the order of writing, and not on one line, so what happens is this picture:

Is there a way in html / css to place the upper and lower indices on the same line vertically? The obvious solution is a negative indentation, but this is a crutch, moreover, it is very unreliable: A change in the font can cause the index to "float" and overlap the main text.

1 answer 1

Option A (as a bonus: sup and sub do not increase the height of the line)
Working example

Option A

html

 <span class="formula">O<span><sup>0</sup><sub>2</sub></span></span>

css

 .formula span{ display: inline-block; } .formula span sup, .formula span sub { display: block; font-size: 65%; line-height: 0; position: relative; vertical-align: baseline; } .formula span sup { top: -0.6em; } .formula span sub { top: 0.4em; }

Option B (sup and sub increase line height)
Working example

Option B

html

 <span class="formula">O<span><sup>0</sup><sub>2</sub></span></span>

css

 .formula span{ display: inline-block; } .formula span sup, .formula span sub { display: block; font-size: 75%; position: relative; top: 0.5em; vertical-align: baseline; }
  • Sorry, there is no more elegant solution, but thanks. I would try to use the [ruby] [1] tag, but Opera and Firefox still do not support it. [1]: htmlbook.ru/html/ruby - Risto
  • one
    You can look towards MathML, but browser support is also limited. - Pavel Azanov
  • @Risto, I updated and expanded my answer. Now the solution works better with multiple lines. - VenZell
  • @Pavel Azanov, it is included in HTML5, which gives some hope. But for now - alas, yes. @VenZell thanks. - Risto