Search code examples
htmlmathjaxfractions

How to display all fractions in web app?

I want to design a simple math app to train fractions. I wonder how to display all fractions in all the latest browsers (Chrome, Safari, Firefox, IE).

Wikipedia embeds them as png, such as:

enter image description here

But this seems very impracticle for a dynamic web app where I want to generate random fractions that pupil shall work with.

Maybe Mathjax could help?

As an example, I want to display 8/5 x 7/4 = ?.

Solution

  • There is a really simple way with css. In case you want to display fractions only this works great. For more complex arithmetic formulas this solution is probably to complicated.

    Preview

    Fraction Example Preview http://imageshack.com/a/img824/218/c6y7.png

    CodePen demo

    HTML

    <div class="fraction">
  <span class="top">8</span>
  <span class="bottom">5</span>
</div>

<div class="fraction">
  <span class="operator">*</span>
</div>

<div class="fraction">
  <span class="top">7</span>
  <span class="bottom">4</span>
</div>

<div class="fraction">
  <span class="operator">= &nbsp; ?</span>
</div>

    CSS

    .fraction, .top, .bottom {
    padding: 0 5px;    
}

.fraction {
    display: inline-block;
    text-align: center;    
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

.operator {
  overflow: auto;
  display: block;
  margin-bottom: 5px;
}