Without JQuery

Question

78

How to display Classic built-up fractions with an horizontal line in CSS / JavaScript?

rated 0 times [ 85] [ 7] / answers: 1 / hits: 28557 / 12 Years ago, fri, december 14, 2012, 12:00:00

I have a fraction and I want to display it neatly and nicely.

For example

4/5

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cassies

Add To Favorites

Follow

Total Points: 112

Total Questions: 99

Total Answers: 96

Location: Mexico

Member since Sun, Jul 25, 2021

3 Years ago

answered 12 Years ago cartersinceren · Accepted 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

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