Many writers represent fractions on web pages as decimals (0.25), percentages (25%), words (“one quarter”) or linear “shilling fractions” (1/4). While most of these representations aren’t wrong, they can often look odd or out of place, especially when used in measurements: “½ cup of sugar” looks better on the page, and takes less space, than the awkward “0.5 cups”.
As the richness of web typography grows, we’re starting to gain very precise control over features that have historically been treated as afterthoughts. The highest degree of finesse is currently found in OpenType fonts, but it is also the most advanced technique. I’ll start with the common approaches to creating fractions on web pages, and address the expert option for fractions seperately.
Common fractions
| Fraction | Decimal | Hexadecimal | HTML Entity |
|---|---|---|---|
| ½ | ½ | ½ | ½ |
| ⅓ | ⅓ | ࡩ | ⅓ |
| ⅔ | ⅔ | ࡪ | ⅔ |
| ¼ | ¼ | ¼ | ¼ |
| ¾ | ¾ | ¾ | ¾ |
| ⅕ | ⅕ | ࡫ | ⅕ |
| ⅖ | ⅖ | ࡬ | ⅖ |
| ⅗ | ⅗ | ࡭ | ⅗ |
| ⅘ | ⅘ | ࡮ | ⅘ |
| ⅙ | ⅙ | ࡯ | ⅙ |
| ⅚ | ⅚ | ×A; | ⅚ |
| ⅐ | ⅐ | ࡦ | &frac17; |
| ⅛ | ⅛ | ×B; | ⅛ |
| ⅜ | ⅜ | ×C; | ⅜ |
| ⅝ | ⅝ | ×D; | ⅝ |
| ⅞ | ⅞ | ×E; | ⅞ |
| ⅑ | ⅑ | ࡧ | — |
| ⅒ | ⅒ | — |
Common “vulgar” fractions are represented in HTML by the &frac entity. The entity code must include an enumerator and denominator. For example, ¼ represents one quarter, which will appear on the page as ¼ .
Well-designed typefaces support the full range of common fractions shown in the table. (Note that the hexadecimal version is used to create the fraction in CSS or JavaScript)*
If you’re encoding your web page in UTF-8 (and you should be) it is possible to copy the fraction character from Adobe InDesign or Microsoft Word (which will automatically create most common fractions from simply having the enumerator and denominator separated by a slash in the text). You can then paste the fraction character directly into your page.
Linear Fractions
If you write the enumerator and denominator of the fraction inline in your web page, you should at least use the correct fraction symbol for the purpose, which is not the forward slash character on your keyboard. The inline fraction symbol is represented by the HTML entity ⁄ (⁄ in decimal) The linearized fraction for “one sixteenth” would therefore be: 1⁄16 , appearing as 1⁄16 on the page.
Faked Fractions
By wrapping the enumerator with the <sup> (superscript) tag, the denominator in the <sub> (subscript) element, and seperating them with the correct symbol, it is possible to “fake” a fraction:
<sup>1</sup> ⁄ <sub>100</sub>
Which produces:
1 ⁄ 100
As you can see, this technique will throw off the line leading; on the other hand, it makes the enumerator and denominator separately addressable in CSS, allowing you to treat them differently from the solidus: for example, creating red numerals divided by a black line.
The easiest way to create fractions, including generating real fractions with arbitrary enumerators and divisors, is a job best left for OTF fonts and advanced CSS3 properties.
* For example, to place a 1/10 fraction after every paragraph using generated content you could write this in your CSS: p:after { content: '\2152'; }
Photograph by Michael, used under a Creative Commons
Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
