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 while this solution is decent the problem lies in having the 4 and the 5 in the same line with a straight line separating them as in traditional fractions.

Any hack or solution would be acceptable. Not necessarily CSS, Javascript or any other language is acceptable.

Answer 1

Use this

<sup>6</sup>/<sub>7</sub>​

DEMO

---

For straight line

HTML

<div class="top">2</div><div class="bottom">6</div>​

CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

​DEMO 2

Answer 2

.fraction {
  display: inline-block;
  position: relative;
  vertical-align: middle; 
  letter-spacing: 0.001em;
  text-align: center;
  font-size: 12px;
  }
.fraction > span { 
  display: block; 
  padding: 0.1em; 
  }
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

Foobar
  <div class="fraction">
    <span class="fup">4</span>
    <span class="bar">/</span>
    <span class="fdn">5</span>
  </div>
Foobar

Change .fraction font-size to get it to a size you want

Answer 3

If you are happy to use JQuery and want to minimise the mark-up that you need to add then you could use the following:

CSS

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

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

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

HTML

<div class="fraction">1/2</div>
<div class="fraction">3/4</div>
<div class="fraction">1/32</div>
<div class="fraction">77/102</div>

JQuery

$('.fraction').each(function(key, value) {
    $this = $(this)
    var split = $this.html().split("/")
    if( split.length == 2 ){
        $this.html('
            <span class="top">'+split[0]+'</span>
            <span class="bottom">'+split[1]+'</span>
        ')
    }    
});

Working example: http://jsfiddle.net/xW7d8/

Without JQuery

To achieve this without JQuery, you can use the following HTML with the same CSS as above:

<div class="fraction">
    <span class="top">1</span>
    <span class="bottom">100</span>
</div>

Answer 4

You need to use the contextual alternatives available in the font. Support for this isn't great right now, but it will turn up everywhere sooner or later.

If you had the class fractions on the number, you'd use:

.fractions { 
    -moz-font-feature-settings: "frac=1";
    -ms-font-feature-settings: "frac" 1;
}

Annoyingly Gecko uses the raw info that would be passed to the font, but the ms version should become standard.

Here is a demo. http://ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#fractions

Right now it's only in Gecko and Trident, but Webkit will surely catch up.

Answer 5

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 6

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 7

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 8

I find the best combination is using a 0.5em size with the unicode fractional slash (⁄ " ⁄ "). The numerator should be vertical-align:super. And if you can affort to drop support for IE7 and below, you can use the :before psuedo-class to make the markup simpler.

.num {
    font-size: 0.5em;
    vertical-align: super;
}
.den {
    font-size: 0.5em;
}
.den:before {
    content: '\2044';
    font-size: 2em;
}

and

<span class="num">19</span><span class="den">45</span>

(Demo)

---

You can also use the straight unicode approach to render ¹⁹⁄₄₅:

¹⁹⁄₄₅

(See the wikipedia article.)

Answer 9

This does not automatically convert '1/2' to a fraction form. But if you have more control over the templating, you can do the following. Since no one has suggested using a table yet, here goes:

HTML:

<table class="fraction">
  <tr>
    <td class="top">Top of Fraction</td>
  </tr>
  <tr>
    <td class="bottom">Bottom of Fraction</td>
  </tr>
</table>

CSS:

table.fraction {
  display: inline-block;
  text-align: center;
  margin-left: 1em;
}

table.fraction td {
  line-height: 2em;
}

table.fraction td.top {
  border-bottom: 1px solid darkgray;
}

Result:

Answer 10

We want a vertically written fraction that is aligned correctly, accommodates mixed numbers, and is writable concisely using HTML. This can be done simply using HTML attributes or tags, and some CSS. There is no Javascript involved. This method also works for aligning mixed fractions to ensure that the fraction is vertically centered, but is ill-suited for multi-layered complex fractions.

The idea using tag names

Let fraction, numerator, denominator be the custom tag names required to render a fraction in pure HTML and CSS via inline-block, relative position, vertical alignment, and a border. Sometimes a small left padding is required to avoid clashing. The CSS styles will be:

fraction, numerator, denominator {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px   
}

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

numerator {
    border-top: 1px solid;
    display: block;
}

Then, the usage of inputting a fraction involves these three tags in order:

<fraction>
    <numerator>A</numerator>
    <denominator>B</denominator>
</fraction>.

Examples

I have shortened the tag names and added padding to address clashing. I also tried implementing a small-fraction html.

frac, numer, denom, fracsmall {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px; margin-right: 2px; 
}

frac, fracsmall {
    display: inline-block;
    text-align: center;    
}
 
denom {
    border-top: 1px solid;
    display: block; /* Creates new line */
}

fracsmall > numer {
    font-size: 75%;
}

fracsmall > denom {
    font-size: 75%;
}

The value of 9<frac><numer>3</numer><denom>4</denom></frac> is also written 
<frac><numer>39</numer><denom>4</denom></frac>.

Also, <fracsmall><numer>1</numer><denom>1</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>2</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>3</denom></fracsmall> + ... is divergent.
<br />

Here is a more complex fraction
<frac>
<numer>
    1 + 
    <frac><numer>1</numer><denom>x</denom></frac> + 
    <frac><numer>1</numer><denom>x<sup>2</sup></denom></frac>
</numer>
<denom>
    x+<frac><numer>1</numer><denom>y</denom></frac>+z
</denom>
</frac>
<br />

Let's try with a continued fraction. π = 
<frac>
<numer>4</numer>
<denom> 1 +
<frac>
<numer>1<sup>2</sup></numer>
<denom> 3 +
    <frac>
    <numer>2<sup>2</sup></numer>
    <denom> 5 +
        <frac>
        <numer>3<sup>2</sup></numer>
        <denom> 7 + ...
        </denom>
        </frac>
    </denom>
    </frac>
</denom>
</frac>
</denom>
</frac>. Looks kinda awkward without bracketing...

Answer 11

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