Menu
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.
226
The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW.
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text.
In HTML, there is the use of <sub> and <sup> tags to define the subscript and superscript text. The superscript text appears in a smaller font and the half character above the normal line. It is generally used to write mathematical equations (like x2 + y2 = r2), footnotes, and many more.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.
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:
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.
139
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
