How to write fraction value using html?

horizontal fraction html
fraction in html w3schools
vulgar fractions html
html math
glyph fractions
5 8 text
1/16 symbol

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

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

Try the following:


How to write fraction value using html?, The MathML mfrac element is used to display fractions. Otherwise, if set to false (which is the default value), numerator and denominator are on top of each other. You can use #rgb , #rrggbb and HTML color names. mathcolor: The text color and also the fraction line color. Sample rendering: (a/b)/(c/d). For pure CSS, using the horizontal bar may be "traditional" but most people nowadays use the diagonal slash, even when writing fractions on paper. Here is what I use:.fraction > sup, .fraction > sub { font-size: .66em; } .fraction > sup { vertical-align: .4em; } .fraction > sub { vertical-align: -.2em; } With this HTML:

.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 class="symbol">/</span>
    <span class="bottom">2</span>

Display fractions in HTML, HTML symbol, character and entity codes, ASCII, CSS and HEX values for Fraction One Half, plus a panoply of others. Math.cos(x) returns the cosine (a value between -1 and 1) of the angle x (given in radians). If you want to use degrees instead of radians, you have to convert degrees to radians: Angle in radians = Angle in degrees x PI / 180.

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.

<mfrac>, Common fractions. Vulgar Fractions in HTML Entities. Fraction, Decimal, Hexadecimal, HTML Entity. ½, ½, &  To write mixed fractions in words, write the whole number separated by the word and, and then the fractional portion. Adhere to the usual rules of hyphenation. For example, 6 3/5 becomes six and three-fifths and 38 57/64 becomes thirty-eight and fifty-seven sixty-fourths.

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

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

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

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

Fraction One Half HTML Symbol, Character and Entity Codes, Creating fractions with HTML can have surprising results for the unwary. Here is an example of both in a large font, first the ⁄ fraction‑slash, then the  From Percentage to Fraction. To convert a percentage to a fraction, first convert to a decimal (divide by 100), then use the steps for converting decimal to fractions (like above).

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

1 &frac12;

Writing Fractions On Web Pages Correctly With Entities, All entities in the table below, will display correctly in all browsers, both in HTML4 ¾, ¾, vulgar fraction three quarters = fraction three quartersTry it. Step 1: Write down the decimal divided by 1, like this: decimal 1. Step 2: Multiply both top and bottom by 10 for every number after the decimal point. (For example, if there are two numbers after the decimal point, then use 100, if there are three then use 1000, etc.) Step 3: Simplify (or reduce) the fraction.

Making Fractions, Which entity should I use? HTML offers three ways to encode special characters like fractions: numeric hex, numeric decimal, and named entities. All three types  Color in the number indicated by the numerator, which in this case is one part. Draw and label same-sized circles for the equivalent fraction options. Use the numerator and denominator of each choice to figure out how many parts to divide the circle into and how many parts to shade.

HTML 4 Entities, In general, the numerators and denominators of fractions may be values other than whole numbers. For example, later in this course we will need to write some​  The Fraction class inherits from the abstract base class numbers.Rational, and implements all of the methods and operations from that class. Fraction instances are hashable, and should be treated as immutable. In addition, Fraction has the following methods: Changed in version 2.7: The Fraction constructor now accepts float and decimal.Decimal

Unicode Fractions, Learn 4000+ math skills online. Get personalized guidance. Win fun awards!

  • Times have changed and we can now use MathML. See my answer below.
  • @0b10011 To be fair: there is a problem with browser support for your solution. It is still like this in 2020.
  • This source is pretty old, but I find it useful for creating simple fractions in HTML and CSS.
  • This specific case could be shortened to 1&frac12;, but you are correct obviously for most other cases.
  • Is that possible to use fraction hyphen instead of fraction slash?
  • @Downlalatech, see my answer.
  • In the most recent versions of Chrome, Firefox, and Opera, inputting 1 1&frasl;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
  • This answer is definitely visually the most pretty! Thanks!
  • 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.
  • I also like how you have a backup way of displaying the fraction in case the CSS is disabled
  • Runs perfect. Thanks!
  • When writing two fractions with a plus sign, the plus sign is not aligned. You can change this by wrapping the + sign with: <span style="vertical-align:10px;">+</span>, see result