I'd like to be able to write a fraction using HTML/CSS/jQuery (rather than using a TeX renderer or even MathML). At the moment there's a great workaround for writing simple fractions that works if you just have one term for both the numerator and the denominator, but once you start using more than one term it looks rather horrible. As an example, using:
<sup><font size=-2>x<sup>2</sup> + 3x + 5</font></sup>/<sub><font size=-2>2x</font></sub>
produces...
x2 + 3x + 5/2x
What I'd like is a beautiful horizontal line to define the fraction rather than a backslash. I've tried using div
tags with border-bottom
as such, but the output is still quite awful:
<div style="float:left;">Substitute 4 for 'x' in the equation: </div>
<div style="float:left">
<div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
<div style="font-size:small;text-align:center;">2x</div>
</div>
produces...
What I'm looking for is a HTML/CSS/jQuery fraction that...
- has an easily discernable horizontal line spanning the width of the longest numerator or denominator;
- appears inline with the current text (it can slightly exceed the line height of the text, but I don't want it bursting out of it's seams); and
- (not really necessary, but a nice cherry on top) italicised letters (not numbers or brackets).
Can this be done? How? Thanks!
<font>
tags? Seriously?!