««« CORANTUS »»»

Nº 2. Thursday, Septemder 9, 2010

Fractions in HTML

There are 3 ways of displaying fractions in a document using HTML:

  • Using the slash: 1/2, 2/3...
  • Using special characters: ½, ¼, ¾
  • Using the fraction slash: 110, 25, 34

In the next lines, we will describe each one of these methods.

Fractions using the slash

The fastest and easiest way of displaying fractions in a document using HTML is using the slash (/):

1/2, 2/3, 3/4, 16/58, 66/100...

This is not the most visually impressive way of displaying fractions, but it is the most accessible of all. The slash key can be found in practically all keyboards, and does not require any major skills to be used. Moreover, it yields pretty good results when used to write inline fractions, i. e. fractions inside a paragraph.

The problem with this method is that the numerator and denominator of a given fraction do not appear where they should be. The numerator should be displayed higher, whereas the denominator should be displayed lower. Besides, the slash should be more inclined.

Fractions using special characters

There exist special characters that have the form of fractions:

½, ¼, ¾...

Because these characters do not usually appear on normal keyboards, it is necessary to use their references in order to be displayed in an HTML document. References are numeric values (decimal or hexadecimal) that are used to identify each one of the characters that can be displayed in an HTML document. In order to type a fraction using its reference, the only thing you have to do is to type its respective reference in the place where you want the fraction to show up, along with the HTML code. For example, the HTML code

<p>2&#189; teaspoons</p>

will be displayed on screen as

2½ teaspoons

The reference for the fraction ½ (half, one half) is all that is written in bold face in the previous example (&#189;). Its hexadecimal reference (&#xBD;) can also be used.

Additionally, the HTML language has also 3 entities that can be used to write fractions (entities are references designed to be easily recalled). All the HTML entities and references (decimal and hexadecimal) for fractions are listed in the table below.

The problem with this method is that not all the browsers support all the references. The most widely supported are the entities and the decimal references.

HTML references for fractions
FractionDecimal referenceHexadecimal referenceHTML entity

Fractions using the fraction slash

There is a character (⁄), called the fraction slash, that is used to write fractions.

12, 34, 2534, 65133

The fraction slash can be displayed using its HTML entity (&frasl;) or its decimal (&#8260;) or hexadecimal (&#x2044;) reference. Notwithstanding, the fraction slash by itself is not enough. It is necessary to use the HTML tags <sup> and <sub> to place the numerator and denominator, respectively, in the correct position within the fraction. Hence, the HTML code

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

will be displayed on screen as

212 kilos

The fraction slash is useful in order to write fractions that do not have their own character reference.



Friday, February 10, 2012 - 8:36 pm

would be great If you have a neat way to do longer fractions like in textbooks, where they give several words on the left, then an equals sign, then several words in the numerator , several words in the denominator