Fractions - CSS Lib | CSS: Presentation Layer
Standards Based Development
Vulgar (Common) Fractions
Vulgar fractions in html are represented by the &frac entity, which requires a denominator and an enumerator; ¼ renders as ¼.
Linear Fractions
Linear fractions are simply inline; don't use "/" aka "forward slash", use the correct entity, in this case being inline fraction symbol, (&fras1; ⁄). 1⁄16 is a linear fraction represented by 1⁄16.
Semantic Faux Fractions
Semantic faux fractions have their enumerator and denominator marked up with sup and sub respectively, separated by the correct symbol, like so: 1 ⁄ 100.
<sup>1</sup> ⁄ <sub>100</sub>
Semantic faux fractions will throw off line leading. It makes the enumerator and denominator separately addressable and open for a css selector attack of death!
Their separation allows us to treat them differently than the solidus, giving us yet another hook.