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

Question

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.

Answer 1

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.

Answer 2

HTML defines a <sup> tag for superscript. For example:

a<sup>x</sup> 

of which you can alter the margins and vertical alignment with CSS.