How to write fraction value using html?

Question

I want to write fraction value such as the picture below:

enter image description here

How do I write fraction value using html without using image?

NOTE: I don't want this 1 1/2 pattern but strictly just as the pic above

Times have changed and we can now use MathML. See [my answer below](http://stackoverflow.com/questions/7525977/how-to-write-fraction-value-using-html/10081414#10081414). — 0b10011, Apr 20 '12 at 16:41
@0b10011 To be fair: there is a [problem with browser support](https://stackoverflow.com/questions/7525977/how-to-write-fraction-value-using-html#comment64486744_10081414) for your solution. It is still [like this in 2020](https://caniuse.com/#feat=mathml). — BairDev, Feb 13 '20 at 08:05
This source is pretty old, but I find it useful for creating simple fractions in HTML and CSS. https://www.periodni.com/mathematical_and_chemical_equations_on_web.html — BairDev, Feb 13 '20 at 08:06

score 105 · Accepted Answer · edited Oct 29 '18 at 11:51

105

Try the following:

1<sup>1</sup>&frasl;<sub>2</sub>

This displays as:

1¹⁄₂

edited Oct 29 '18 at 11:51

fboes

2,149
16
17

answered Sep 23 '11 at 08:05

thomson_matt

7,473
3
39
47

7

In the most recent versions of Chrome, Firefox, and Opera, inputting `1 1⁄2` will automatically convert the numerator and denominator to unicode super- and subscripts, which looks even better than HTML super- and subscripts: 1 1⁄2 – gwistix Oct 27 '16 at 15:24

score 39 · Answer 2 · edited May 11 '18 at 16:33

39

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
}

1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>

edited May 11 '18 at 16:33

msrd0

7,816
9
47
82

answered Feb 10 '16 at 10:13

lokesh

690
5
13

1

This answer is definitely visually the most pretty! Thanks! – Ansjovis86 Mar 13 '17 at 23:39
3

Works perfectly! I think this should be the accepted answer as in the question the asker wanted something looking EXACTLY the same, which is not what is in the accepted answer. – Ethan Jul 14 '17 at 23:14
1

I also like how you have a backup way of displaying the fraction in case the CSS is disabled – Ethan Jul 14 '17 at 23:15
Runs perfect. Thanks! – Tito Leiva Oct 25 '18 at 10:01
omg, this is such an underrated solution. The way it works it genius! Brilliant. +1 – Kiran Mar 04 '20 at 22:38

Arsen7 · Answer 3 · 2011-09-26T07:39:57.650

The following code will be rendered just as the example in the question, and if the client does not support CSS it will be rendered as plain text, still readable as a fraction:

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</sub></span>.</p>

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

The middle <span> serves only for the clients who do not render CSS - the text is still readable as 1 12/256 - and that's why you should place a space between the integer and the fraction.

You may want to change the font-size, because the resulting element may be a little taller than the other characters in the line, or you may want to use a relative position to shift it a little to the bottom.

But the general idea, as presented here, may be enough for the basic use.

When writing two fractions with a plus sign, the plus sign is not aligned. You can change this by wrapping the + sign with: `+`, see result http://jsfiddle.net/hx5oyotq/1/ — Avatar, Sep 12 '14 at 12:46

Giorgi Gzirishvili · Answer 4 · 2017-01-16T16:22:24.493

9

Check out the following:

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

CodePen

edited Jan 16 '17 at 16:22

answered Jan 16 '17 at 15:08

Giorgi Gzirishvili

253
2
6

omg, this is such an underrated solution. The way it works it genius! Brilliant. +1 – Kiran Mar 04 '20 at 22:35

Xavi López · Answer 5 · 2011-09-23T08:59:57.910

7

You can use <sup> and <sub> elements in conjunction with the fraction slash entity &frasl;

<sup>1</sup>&frasl;<sub>2</sub> is ¹⁄₂

UPDATE: I made this fiddle that shows a hyphenated fraction in HTML using a table.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>

edited Sep 23 '11 at 08:59

answered Sep 23 '11 at 08:07

Xavi López

27,550
11
97
161

1

Is that possible to use fraction hyphen instead of fraction slash? – user774411 Sep 23 '11 at 08:13
Doesn't seem to be on the [1.4 specs](http://www.w3.org/TR/html4/sgml/entities.html), so I guess there's no standard entity. I'm no css expert, so I'd do it with a two row, one column `` with a border in the middle. Quick and dirty. Here you can see it in action: [Math in HTML](http://www.cs.tut.fi/~jkorpela/math/#twodim)
– Xavi López Sep 23 '11 at 08:29
2

The table is not a legal element in a `
`, so it will not be possible to use this solution in a sentence, for example. Besides that, the `
` should not be used for things other than tabular data.
– Arsen7 Sep 23 '11 at 09:05
1

Agree, your proposal is much better. – Xavi López Sep 23 '11 at 09:15

score 6 · Answer 6 · answered Apr 27 '17 at 05:32

6

I think there is an easier way for doing this. Use the following HTML.

1 &frac12;

Result is 1 ½

answered Apr 27 '17 at 05:32

adithyan sp

61
1
1

Perfect! Simplest is best - all of these other answers are too much for something so simple. – ArtOfWarfare Jan 06 '18 at 22:59
3

what if I have a fraction such as 2/15, how can I write it ?? – Maged Saeed Feb 11 '18 at 17:32
2

This actually renders a unicode character, there are just the most used fractions available, won't work with any fraction. ⅐ ⅑ ⅒ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞ ¼ ½ ¾ – Petruza Apr 01 '21 at 15:09

0b10011 · Answer 7 · 2015-11-23T22:04:16.843

2

Using MathML (Specification, Wikipedia):

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

edited Nov 23 '15 at 22:04

answered Apr 10 '12 at 00:05

0b10011

18,397
4
65
86

2

@Kartheeks As mentioned by jedierikb, MathML isn't fully supported by all browsers. It looks great in my default mobile browser though (Firefox), so it all depends on which browsers you're supporting. – 0b10011 Dec 16 '13 at 15:17
3

More specifically, it doesn't work on *most* browsers. That link shows only Safari 9.1+, iOS Safari 9.2+, and Firefox 46+ with MS Edge "Not currently planned" and Chrome "No longer pursuing". – Taylor D. Edmiston Jul 24 '16 at 00:00
Ah, the eternal chromium feature request: https://bugs.chromium.org/p/chromium/issues/detail?id=152430 – Ciro Santilli OurBigBook.com Apr 17 '17 at 10:53
for cross browser support of MathMl use MathJax :- – Neil Stevens Jun 08 '17 at 15:55

score 2 · Answer 8 · answered Jan 28 '17 at 07:24

2

Using pure html and with margin property of br you can work around

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

answered Jan 28 '17 at 07:24

Arun Sharma

517
9
16

score 1 · Answer 9 · answered Sep 16 '22 at 17:57

1

Simple "inline" HTML

a
<span style="display:inline-flex;flex-direction:column;vertical-align:middle;">
    <span>1</span>
    <span style="border-top:1px solid">2</span>
</span>
b

CodePen

https://codepen.io/eyedean/pen/bGMqBaB

Screenshot

answered Sep 16 '22 at 17:57

Aidin

25,146
8
76
67

score 0 · Answer 10 · answered Jan 30 '18 at 11:48

0

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

answered Jan 30 '18 at 11:48

Advay168

607
6
10

Stephen Waldron · Answer 11 · 2021-03-10T19:58:08.103

Here is another method using newer CSS methods. This method also uses custom tags, but you can change these to <div class = "..."></div> if you're not fond of custom tags.

Copy the following to your CSS:

Use .fraction and .numer if you use classes instead

fraction {
  display: inline-grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;

  font-size: 0.8em; // You can change fraction size here. I recommend 0.5em ~ 0.8em
  vertical-align: top;
}

numer {
  border-bottom: 1px solid;
}

You can now use the tags like this:

Add 1 <fraction> <numer>1</numer> 2 </fraction> cups of flour into the bowl and stir.

Output

I'd also recommend using read-only formatting for screen-reader output:

CSS

read {
  position: absolute;
  font-size: 0;
}

HTML

1 <fraction> <read>and</read> <numer>1</numer> <read>over</read> 2 </fraction>

Screen-reader: "one and one over two..."

How to write fraction value using html?

11 Answers11

Simple "inline" HTML

CodePen

Screenshot

Linked

Related