CODEWITHSUNDEEP
htmlcss
cYn
cYn

Reputation: 3381

How to display horizontal fraction symbol

I want to imitate fraction numbers like this: http://projectpophealth.org/images/Multi-Provider_Measure_Page.png

I've already seen alternative ways to display fractions: What would be the math symbol for representing a fraction?

But I really like the look and feel of the horizontal symbol. How do I display it in HTML?

Upvotes: 1

Views: 2043

Answers (2)

Ivan
Ivan

Reputation: 406

I've made up a simple plain html/css solution, you may want to adjust the font to one more suitable by the way.

jsFiddle

<body>
    <div class="fraction">
        <p class="num">6</p>
        <p class="dem">14</p>
    </div>
</body>

.fraction{
    display: inline-block;
    text-align: center;
    position:relative;
    padding:0 1em;
}

.fraction > .num {
    border-bottom: 2px solid #808080;
    padding:4px;
    margin:0 0 4px 0;
}

.fraction > .dem{
    padding: 0;
    margin: 0;
}

.fraction > .num:before{
    content: "(";
    font-size:2em;
    height:100%;
    position:absolute;
    left:0;
    top:0.2em;
}

.fraction > .dem:after{
    content: ")";
    font-size:2em;
    height:100%;
    position:absolute;
    right:0;
    top:0.2em;
}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157384

As you commented that its difficult for you to do so, here's the answer. I've used inline elements and I am turning them to a block level so that they render one below another, and for separating them out, I use border-bottom on the first span element.

Rest, for the top offset, I use position: relative; to settle it down... Rest is self explanatory.

Demo

HTML

<div>(<span><span>18</span><span>26</span></span>)</div>

CSS

div {
    font-size: 40px;
    color: #515151;
}

div > span {
    font-size: 18px;
    display: inline-block;
}

div > span > span {
    display: block;
    padding: 0 5px;
    position: relative;
    top: 5px;
}

div > span > span:first-child {
    border-bottom: 1px solid #515151;
    color: green;
}

div > span > span:last-child {
    color: tomato;
}

I feel that these types of expressions or over complex ones will get cumbersome to do with CSS Only, hence, take a look at Mathjax

Upvotes: 1

Related Questions