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

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

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 4

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 5

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 6

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>