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

Question

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...

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!

Answer 1

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>

Answer 2

Try this: http://www.mathjax.org/

It's used over at https://mathoverflow.net/

Answer 3

I've made a quick jsfiddle

I'm not sure quite what you mean when you said that divs and borders made it look awful, becuase my solution is quite similar.

It just uses spans and borders.

It's not perfect: the text does not get aligned to the center, but it's a nice quick alternative to a TeX renderer.

Answer 4

This is what LaTeX is for. Here's a jQuery plugin which seems to have a nice implementation: http://blog.dreasgrech.com/2009/12/jslatex-jquery-plugin-to-directly-embed.html

Answer 5

I would personally suggest MathJax. (it uses HTmL/CSS)

But, if you do not want to resort to a TeX renderer, then you may want to investigate the CSS behind a MathJax fraction with Chrome Inspector.

Go to this answer of mine, Ctrl-Shift-I (in Chrome), use the inspector magnifying glass on the fraction. Then check out the CSS in the sidepane.