How to Make Fractions Look Good in HTML

There are a number of ways to display fractions in html. Most don't look quite right like this older technique I was using. Its ok but notice how the plus sign is not properly centered vertically. It good enough but we should be able to do better.
6
7
+ 3
4

This week I experimented for a few hours and found a better technique that doesn't require using fixed positioning. I experimented with fixed positioning and it required different positioning depending on wether it was a one or two digit number which wasn't reasonable.

This is an example of the new technique I devised. Notice how the variable x is nicely positioned horizontally and vertically with the fraction. Notice how the plus sign is properly centered vertically.

3
5
x + 8 = 5 x + 13
5

How To:
As with most html layout techniques you will need to use an html table. Since the fraction is a different height from the other numbers and variables. The technique is in bold (actually h2). Putting the denominator into a <SPAN> tag that has the style "line-height:60%;" is the key for this technique. I put the style directly into the tag but you could style a denominator class in a stylesheet if you choose.
<table border=0 cellpadding=0 cellspacing=2>
<tr> <td align=center>

<u>3</u><br> <span style="line-height:60%;">5</span>

</td> x + 8 = 5x + </td> <td align=center>

<u>13</u><br> <span style="line-height:60%;">5</span>

</td>
</tr></table>

With style="line-height:60%;" for the denominator.
3
5
x + 8 = 5x + 13
5

Without style="line-height:60%;" for the denominator. Notice how there is too much space for the denominator and that the "x" on the equation doesn't line up correctly in the vertical direction next to the fraction which might cause your students to believe that the "x" is in the denominator.
3
5
x + 8 = 5x + 13
5

I hope you find this helpful.
Copyright 2012 - Scott Wickham - Created 7/24/12