Is there a simple way to place a line between two lines of text?

Question

For instance, instead of having a+b/c, I want the 'a+b' part on top of the 'c' part with a line in between.

I have tried using a fraction line like so <sup>a+b</sup>&frasl;<sub>c</sub> but instead it just produces this ^a+b⁄_c as opposed to a horizontal line with the text directly above and below.

Answer 1

There's LaTex, which is used by math.stackexchange.com. You can also use something like MathML.

Answer 2

MathJAX will allow you to include Latex or MathML formulas in your HTML. MathJax can also be configured to use native MathML rendering when available in a browser, and only fall back to HTML-CSS mode when native rendering is not available.

Answer 3

check this

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) {
    var split = $(this).html().split("/")
    if( split.length == 2 ){
        $this.html('
            <span class="top">'+split[0]+'</span>
            <span class="bottom">'+split[1]+'</span>
        ')
    }    
});

http://jsfiddle.net/xW7d8/

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

Answer 4

You can use KG Traditional Fractions 2 font! It is free for personal use!

Answer 5

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}

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