4

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!

1
  • 2
    <font> tags? Seriously?! Apr 22, 2012 at 10:40

5 Answers 5

4

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

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

1
  • 1
    Thanks @ilivewithian - I didn't want a TeX renderer though.
    – rs77
    Apr 22, 2012 at 11:09
3

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>
1
3

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

1
  • Thanks Josh. I'm looking to move away from anything that requires external rendering of the fraction.
    – rs77
    Apr 22, 2012 at 11:14
2

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.

3
  • Thanks Manishearth, I can't believe the additional quantity of HTML & CSS inserted! As noted above I'd prefer not to use MathJax.
    – rs77
    Apr 22, 2012 at 11:18
  • @rs77 I know you don't wanna use it, I was thinking that you could check out the CSS, remove superfluous stuff, and use a similar CSS for fracs. Apr 22, 2012 at 12:47
  • @rs77: I posted another answer that builds upon your example in a very simple manner. I posted it separately since it's fundamentally different from this answer. Apr 22, 2012 at 14:43
1

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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.