HTML/CSS layout number to the power of expression (a^x)

Issue

I need to layout some math expressions in a web page, cant use latex or mathML, just plain HTML (not HTML5)

I have an expression to the power of a different expression, for example (a+b+sqrt(c))^(2x+b)

The second expression should be to the right of the first expression a bit smaller and above it.

Sound simple enough but I can't seem to get it right.

Any help is the styling and layout would be great, thanks.

Solution

HTML is rather limited when it comes to mathematical expressions. In principle, HTML specifications suggest that you use sup element for superscripts, so the sample expression would be

(<i>a</i> + <i>b</i> + √<i>c</i>)<sup>2<i>x</i> + <i>b</i></sup>

However, the implementations of sup in browsers are inconsistent and generally poor (causing e.g. uneven line spacing), so it is pragmatically better to use the span element with a class instead:

(<i>a</i> + <i>b</i> + √<i>c</i>)<span class=sup>2<i>x</i> + <i>b</i></span>

with CSS code like

.sup {
  position: relative;
  bottom: 1ex; 
  font-size: 80%;
}

Some reasons are explained on my page Math in HTML (and CSS). Also consider JavaScript-based libraries for pages containing complicated math expressions:

• KaTeX
• MathJax
• jqMath

The sample expression is a borderline case; it would look mathematically more correct if the square root were represented using a square root symbol with vinculum and not just √c, and trying to construct a vinculum using HTML and CSS gets rather dirty, but otherwise it can be reasonably handled with HTML and CSS.

Answered By - Jukka K. Korpela