Search code examples
jqueryhtmlcssfractions

How can I write a complex fraction using HTML/CSS/jQuery?

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: &nbsp;</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...

div tags for fraction

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!

Solution

  • Alright, I found a better way to do what you were doing. No extra CSS, just some tabular magic.

    <table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <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></td>
</tr>
</table>

    Tables auto-center-align :D

    For more text, add more <td>s. Keep text-<td>s and math-<td>s separate. Add another <tr> for a new line.

    <table><tr><td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <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></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
<tr>
<td>
<div style="float:left;">Substitute 4 for 'x' in the equation: &nbsp;</div></td>
 <td> <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></td>
<td>. If you feel bored, solve this as well:</td>
<td> <div style="float:left">
    <div style="border-bottom:1px solid;font-size:small;text-align:center;">y<sup>2</sup> + 3x+5y<sup>5</sup> + 5</div>
    <div style="font-size:small;text-align:center;">1000</div>
  </div></td>
</tr>
</table>