How to display “Classic” built-up fractions with an horizontal line in CSS / JavaScript?

Question

I have a fraction and I want to display it neatly and nicely.

For example

4/5

would be

4
-
5

I have looked at this and

Answer 1

Flexbox now allows some additional options

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

<span class="fraction">
  <span class="numerator">12</span>
  <span class="denominator">7</span>
</span>

Answer 2

I, personally, see no need for JavaScript in this case.

Check out the following:

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

CodePen

Answer 3

You may want to look at something like MathJax which uses Javascript.

If you are only using basic fractions you can use the Unicode characters (or equivalent HTML entities):
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

For pure CSS, using the horizontal bar may be "traditional" but most people nowadays use the diagonal slash, even when writing fractions on paper. Here is what I use:

.fraction > sup,
.fraction > sub {
  font-size: .66em;
}
.fraction > sup {
  vertical-align: .4em;
}
.fraction > sub {
  vertical-align: -.2em;
}

With this HTML:

<span class="fraction">
  <sup>1</sup>⁄<sub>8</sub>
</span>

Answer 4

I found this useful to me

As I needed to have the line up when denominator was longer and down when numerator was longer, I changed some code above (johnatan lin) like this. When you have a longer numerator use the class numerator for the numerator and no classes for denoninator when you have longer denominator, do not use classes for the numerator and use the class denominator for the denominator.

The css style

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

The html code example

Ricavi Numero di coperti

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

<h1>A way to show fractions (not only numers)</h1>
This is what I did after different solutions found on stackoverflow.

<h2>This is with longer numerator</h2>
<div class="fraction">
  <div class='numerator'>Longer than the other one</div>
  <div>Numero di coperti</div>
</div>


<h2>This is longer denominator</h2>
<div class="fraction">
  <div>Ricavi</div>
  <div class="denominator">Numero di coperti</div>
</div>
<p>Hello from Giovanni</p>

A way to shorten this stuff

To make thing go faster I put this javascript (into the body among tags or on another js file with ).

function numeratore(num, den){
    document.write("<div class='fraction'><div class='numerator'>" + num + "</div><div>" + den + "</div></div><div id='div1'></div>")
}

function denominatore(num, den){
    document.write("<div class='fraction'><div>" + num + "</div><div class=\"denominator\">" + den + "</div></div><div id='div1'></div>")
}

and this into the html body

<script>
denominatore("Ricavi", "numeri di coperti")
numeratore("Costi di produzione", "Numero menu serviti")
</script>

denominatore: when the denominator is longer numeratore: when the numerator is longer

and the css, like before

This goes into the tags or into the

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}