demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Writing Fractions On Web Pages Correctly With Entities

html / typography

Estimated reading time: 3 minutes, 9 seconds

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 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

Vulgar Fractions in HTML Entities
Fraction Decimal Hexadecimal HTML Entity
½ ½ ½ ½
⅓ ࡩ ⅓
⅔ ࡪ ⅔
¼ ¼ ¼ ¼
¾ ¾ ¾ ¾
⅕ ࡫ ⅕
⅖ ࡬ ⅖
⅗ ࡭ ⅗
⅘ ࡮ ⅘
⅙ ࡯ ⅙
⅚ &#215A; ⅚
⅐ ࡦ &frac17;
⅛ &#215B; ⅛
⅜ &#215C; ⅜
⅝ &#215D; ⅝
⅞ &#215E; ⅞
⅑ ࡧ
⅒  

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 or )*

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> &#8260; <sub>100</sub>

Which produces:

1100

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'; }

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.