cjds cjds - 11 months ago 60
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


would be




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


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:


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

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

    border-top: 1px solid #000;
    display: block;


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


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

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