How to code Square Root symbol in HTML and CSS

Coding mathematical formulas in HTML is somewhat frustrating because HTML does not support formulas. It is possible to code simple mathematical equations with HTML markup without having to resort to using graphical images. The advantage of HTML and CSS over graphical images is that the display can be enlarged using the browser zoom or text-size options. A quadratic equation is easily coded using the <sup></sup> tag.

ax² + bx + c = 0

HTML Code:

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:

√ X + 1

HTML Code:

<span style="white-space: nowrap; font-size:larger">
&radic;<span style="text-decoration:overline;">&nbsp;X + 1&nbsp;</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 X² + 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:

√ X² + 1 √ X² + 1

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.

	_______
√	X² + 1

HTML Code:

<table style="border-spacing:0px; border-width:0px; font-family:verdana;">
  <tr>
    <td>
&nbsp;
    </td>
    <td>
_______
    </td>
  </tr>
  <tr>
    <td style="padding:0px; font-size:larger">
&radic;
    </td>
    <td style="padding:0px;">
&nbsp;X<sup>2</sup> + 1&nbsp;
    </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:

√ (a2.7+ b8.6)

HTML Code:

&radic;<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>)&nbsp;</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

HTML Code:

<table style="font-family:verdana;">
  <tr>
    <td>&minus;b &plusmn; 
    &radic;<span style="text-decoration:overline"> &nbsp;
    b<span style="font-size: 10px;vertical-align:+25%;">2</span> &minus; 
    4ac&nbsp;</span></td>
  </tr>
  <tr>
    <td style="text-align:center;">
    <span style="text-decoration:overline;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    2a &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
    </td>
  </tr>
</table>