A quadratic equation may be coded using the <sup></sup> tag.
ax<sup>2</sup> + bx + c = 0
HTML provides the square root character entity √ (√) which is a single character. In order to code the square root symbol, the characters that follow the square root character must have an overline. This is accomplished by creating a span of characters with a CSS style "text-decoration:overline;" as in the following example:
<span style="white-space: nowrap; font-size:larger"> √<span style="text-decoration:overline;"> X + 1 </span> </span>
Notice that the CSS style includes the nowrap option to keep the browser from splitting up the formula, and the formula within the square root has a leading and trailing non-blank space to extend the overline one character beyond the formula.
If you try to apply the above technique to a formula such as X2 + 1, the results don't look quite right because the overline applied to the superscript may be higher for some browsers, or it may cross over the superscripted characters:
Square Roots with superscripts may be coded using a table with two rows and two columns. The upper row contains to go over the square root symbol and enough underline characters to go over the formula. To avoid problems with rendering on different browsers, the table should use a widely availabe font family such as Verdana or Arial.
|√||X2 + 1|
<table style="border-spacing:0px; border-width:0px; font-family:verdana;"> <tr> <td> </td> <td> _______ </td> </tr> <tr> <td style="padding:0px; font-size:larger"> √ </td> <td style="padding:0px;"> X<sup>2</sup> + 1 </td> </tr> </table>
A technique that produces good results is to use a <span> tag, instead of the <sup> tag, to control the size and position of the superscripts so that they will not go into the overline. For example:
√<span style="text-decoration:overline"> (<i>a</i><span style="font-size: 10px;vertical-align:+25%;">2.7</span>+ <i>b</i><span style="font-size: 10px;vertical-align:+25%;">8.6</span>) </span>
The table technique may be expanded with additional rows to create quite complex expressions. The quadratic formula can be coded with a row where the overline in the denominator separates the numerator and denominator of the formula.
|−b ± √ b2 − 4ac|
<table style="font-family:verdana;"> <tr> <td>−b ± √<span style="text-decoration:overline"> b<span style="font-size: 10px;vertical-align:+25%;">2</span> − 4ac </span></td> </tr> <tr> <td style="text-align:center;"> <span style="text-decoration:overline;"> 2a </span> </td> </tr> </table>
The Mathematical Markup Language (MML) defined by the W3C organization can be found here: www.w3.org/TR/MathML3/. The markup uses labels in XML format for operators, identifiers, numbers, etc. and defines their relationships. The markup document has an appendix that lists the codes for the mathematical operators at: www.w3.org/TR/MathML3/appendixc.html. In the example below, the code − is used for the minus sign (−), ± is used for the plus or minus sign (±), <mfrac> is used to define a fraction consisting of two rows for the numerator and denominator, and <msqrt> defines the contents within the square root radical.
<math display='block'> <mrow> <mi>x</mi><mo>=</mo> <mfrac> <!-- Start Numerator --> <mrow><mo>−</mo><mi>b</mi><mo>±</mo> <msqrt> <mrow> <msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi> </mrow> </msqrt> </mrow> <!-- Start Denominator --> <mrow> <mn>2</mn><mi>a</mi> </mrow> </mfrac> </mrow> </math>
Although the markup is complicated, the use of MathJax facilitates the display of mathematical equations without having to use graphic images.