cjds cjds - 4 months ago 15
HTML Question

How to display "Classic" fractions in CSS / Javascript

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

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

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

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/