CODEWITHSUNDEEP
htmlmathjaxfractions
mcbetz
mcbetz

Reputation: 2389

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

Upvotes: 3

Views: 277

Answers (1)

ph3nx
ph3nx

Reputation: 1046

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;
}

Upvotes: 4

Related Questions