Usually when I write fractions I use LaTeX’s command: `\frac{x^2 + 3x + 5}{2x}`

which is easy, neat and when rendered does an awesome job:

[latex]\frac{x^2 + 3x + 5}{2x}[/latex]

Currently, though I’m designing a simple website for my math students where I’d prefer not use a math renderer (if possible). The reason being that most of the content which is published does not require extensive math notation and therefore the majority of things that I need to show doesn’t need the heavy lifting of a LaTeX engine.

However, one mathematical notation that is needed in this simple activity did require the use of writing some fractions, so I thought to myself, *Instead of using LaTeX why not design it using simple HTML & CSS (and maybe with the help of jQuery)?* Surely it couldn’t be that hard? I mean, in the HTML world we have the following workaround:

<sup>x<sup>2</sup> + 3x + 5</sup>⁄<sub>2x</sub> |

Unfortunately it looks ugly. So I started my quest to find a much more elegant solution with the help from the folks at Stack Overflow.

When creating a fraction there were two main things I wanted to keep in mind, with a third as an optional preference:

- I want the line of the fraction to be horizontal and to spans the length of the longest expression in either the numerator, or the denominator;
- I want the fraction to appear inline with the question being asked of it, I don’t want it to protrude too far outside the line height; and
- I want the pronumerals (letters) to be italicised

Those are my fraction format terms and conditions. The last one I could forgo as the other two are the main essence of writing a fraction. Knowing this I then set about using divs and this is what I created initially:

<!DOCTYPE html> | |

<html> | |

<head> | |

<meta charset=utf-8 /> | |

<title>HTML Fractions - Divs</title> | |

<style> | |

div.qtn { | |

font-size: 14px; | |

} | |

div.q { | |

float: left; | |

height: 2em; | |

padding: 0.75em 0 0.75em 0; | |

} | |

div.frac { | |

float: left; | |

text-align: center; | |

} | |

div.numer { | |

border-bottom: 1px solid black; | |

} | |

div.denom { | |

border-top: 1px solid black; | |

} | |

</style> | |

</head> | |

<body> | |

<div class="qtn"> | |

<div class="q">Substitute 4 for 'x' in the equation: </div> | |

<div class="frac"> | |

<div class="numer">x<sup>2</sup> + 3x + 5</div> | |

<div class="denom">2x</div> | |

</div> | |

</div> | |

</body> | |

</html> |

Which produces:

Then after receiving a few responses from SO I received this better response which required less HTML & CSS:

<!DOCTYPE html> | |

<html> | |

<head> | |

<meta charset=utf-8 /> | |

<title>HTML Fractions - Table</title> | |

<style> | |

table { | |

font-size: 16px; | |

} | |

div.numer { | |

border-bottom:1px solid; | |

text-align:center; | |

font-size: 0.8em; | |

} | |

div.denom { | |

font-size: 0.8em; | |

border-top: 1px solid; | |

text-align: center; | |

} | |

</style> | |

</head> | |

<body> | |

<table> | |

<tr><td>Substitute 4 for 'x' in the equation: </td> | |

<td> | |

<div class="numer">x<sup>2</sup> + 3x + 5</div> | |

<div class="denom">2x</div> | |

</td> | |

</tr> | |

</table> | |

</body> | |

</html> |

## Conclusion

Thankfully, there are solutions available for us in being able to write complex (yet not too complex) fractions in HTML & CSS. I’m guessing if I want to italicise the letters I’d be looking at something like jQuery.

For the time being I’m happy with what I have, and it’s a better alternative than `⁄`

.