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.

Eri

What would be an "amazing" solution? It looks like you are trying to change the content – Otway

You can not replace a / with a - with just CSS. Your going to use Javascript for this then. – Philanthropy

mathjax.org/demos/scaling-math overkill if you just want fractions, also, its javascript – Whitaker

Updated the question. Removed the "amazing" part and hopefully clearly put up what I', looking for. And I don't mind a javascript thing – Eri

Nice @rob though I mentioned fractions above I'll be using this for derivatives and other stuff so your solution is helpful. – Eri

If you're looking for more than just a simple fraction, you might be interested in mathjax.org -- as used on certain StackExchange sites. – Adherence

Answer 1

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>

Otway

An alternative way can be done, using custom tag names. – Dowery

However, the text is misaligned. – Dowery

Answer 2

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

Cordula

Nice. But I wanted a straight line – Eri

Probably don't do that and do this instead: changelog.ca/log/2008/07/01/writing_fractions_in_html – Angst

Answer 3

.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

Depersonalization

How is .fup defined? – Elisa

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.

Lombroso

Chrome supports it since version 16, provided that the -webkit- prefix is used. The main problem is font support: among fonts commonly available on Windows, only the “C fonts” (Cambria, Calibri, etc.) and Palatino Linotype support "frac". Moreover, they rendering has a slanted fraction slash, as opposite to a horizontal line, as the question seems to ask for. Palatino Linotype supports that, too, under the OpenType property name "afrc", but the result is barely legible on normal screen in copy text sizes. – Dumpy

Stacked fractions are "afrc". "frac" is for diagonal fractions. – Chukchi

OpenType allows for frac=1 to equal diagonal fractions and frac=2 to equal nut fractions, at least according to the OpenType settings in LibreOffice. – Elisa

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>

Newman

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

Turncoat

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>

Tellus

if the numerator is shorter than the denominator, the 'fraction line', here, is only as long as the numerator, and that doesn't look right. – Street

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.)

Tunesmith

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:

Asur

@Street Sorry, fixed. – Asur

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

Rigorous

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

Erek