How to display "Classic" built-up fractions with an horizontal line in CSS / JavaScript?
.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>FoobarChange .fraction font-size to get it to a size you want
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>