Making Fractions

Creating fractions with HTML can have surprising results for the unwary. For websites with various fractions, consistency requires they all be constructed with the same method.

There are at least 4 ways to make fractions:

1. Unformatted fractions — These fractions are typed straight across, with the numerator and the denominator having the same baseline. Examples are 1/2 and 64/256.

2. Using HTML entities — These would be simple single-digit fractions like ½ and ¾. They are limited to pre-defined HTML entities. Here is a list.

   ½ = ½ ⅓ = ⅓ ⅔ = ⅔ ¼ = ¼ ¾ = ¾ ⅕ = ⅕ ⅖ = ⅖ ⅗ = ⅗ ⅘ = ⅘
   ⅙ = ⅙ ⅚ = ⅚ ⅛ = ⅛ ⅜ = ⅜ ⅝ = ⅝ ⅞ = ⅞

3. Using HTML sup and sub codes — Fractions with larger numerators and denominators can be made, like ¹²⁸⁄₂₅₆ and ⁶⁴⁄₂₅₆. They tend to open the line spacing to accommodate the fraction number character positioning.

4. Using CSS classes — CSS classes can be defined to create fractions, like 64⁄256 and 128⁄256 (with the ⁄ HTML entity fraction‑slash) or 64/256 and 128/256 (with the keyboard slash). They don't open the line spacing to accommodate the fractions.

The last method, using CSS classes, is addressed in this article.

Either the HTML entity ⁄ fraction‑slash character or the keyboard slash character may be used to publish fractions. In my opinion, ⁄ creates a better-formed fraction. Both methods are addressed here.

The difference between the two is the HTML entity ⁄ fraction‑slash character is slightly more slanted than the keyboard slash character. In some fonts, the ⁄ fraction‑slash might also be thinner.

Here is an example of both in a large font, first the ⁄ fraction‑slash, then the keyboard slash:

CSS class names are used for the fractions. The style is dynamic with the font size so the fractions will look good at any size.

As you can see, the two different kinds of slashes publish the fractions with a slightly different format.

Here are the CSS styles. The first two are for the fraction numerator and denominator numbers. The third is used only for the ⁄ fraction‑slash character.

<style type="text/css">
.numerator {
   font-size:.7em;
   line-height:.7em;
   vertical-align:.3em;
}
.denominator {
   font-size:.7em;
   line-height:.7em;
   vertical-align:-.2em;
}
.slash-entity {
   font-size:.8em;
   line-height:.8em;
}
</style>

That style should be good for most font families. If needed, tweak the styles to make the fractions look good at your website.

Construct a fraction in three steps: The numerator, the slash, and the denominator.

Here is the code for each part of the 64⁄256 fraction. Following that is the code for the entire fraction.

1. The Numerator.

   <span class="numerator">64</span>
   

2. The Slash.

   If the ⁄ fraction‑slash character is used:

   <span class="slash-entity">&frasl;</span>
   

   If the keyboard slash character is used:

   /
   

3. The Denominator.

   <span class="denominator">256</span>
   

The code for the entire fraction.

If the ⁄ fraction‑slash character is used:

<span class="numerator">64</span><span class="slash-entity">⁄</span><span class="denominator">256</span> 

If the keyboard slash character is used:

<span class="numerator">64</span>/<span class="denominator">256</span> 

When style is applied consistently, and this applies to how fractions are formed, there tends to be less feeling of raggedness or irregularity.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager