The ideal solution to creating fractions on webpages would be to have the typeface automatically produce the correct fraction from whatever numerator and denominator you used in the text. This ability to automatically substitute characters is a feature of some OpenType fonts.

While OpenType is supported in all modern browsers as a typeface, the advanced CSS3 properties used to get the most out of the format are limited to Firefox 4+, IE10 and Chrome 20+ at the moment; support for Safari is expected in the near future. Writing the CSS to control these features is made slightly more complex by the fact that Chrome’s OpenType will become confused if you immediately follow the fraction with another character; Firefox’s support went through a small syntax modification towards what is now the accepted standard.

First, we have to embed the font on our page. (For this article, I’m using the wonderful – and free! – MEgalopolisExtra, by the SMeltery font foundry).

Note that Firefox will preferentially use WOFF fonts over OTF in an @font-face declaration unless you’re careful about the order: the trick is to put the OTF font last, like so:

@font-face {
	font-family: 'Megalopolis';
	src: url('megalopolis.eot');
	src: url('megalopolis.eot?#iefix') format('embedded-opentype'),
		 url('megalopolis.woff') format('woff'),
		 url('megalopolis.ttf') format('truetype'),
		 url('megalopolis.svg#megalopolis') format('svg');
	src: url('megalopolis.otf');
}

Then, we’re going to apply Megalopolis to our paragraphs, and turn on arbitrary fractions at the same time:

p { 
	font-family: Megalopolis, serif; 
	-moz-font-feature-settings: "frac=1"; 
	-moz-font-feature-settings: "frac";
	-webkit-font-feature-settings: "frac"; 
	-ms-font-feature-settings: "frac";
	font-feature-settings: "frac";
	font-size: 2rem;
}

We can now put in any two numbers in our text separated by a divisor and they will automatically be turned into a fraction (the browser will recognize the correct divisor character or the standard forward slash)

This is a 1⁄2 inch drill bit

Which, associated with the correct CSS, produces:

This is a 1⁄2 inch drill bit

Magic!

Long term, the CSS property and value will likely simplify to font-variant-numeric: diagonal-fractions but support for that does not yet exist in browsers.

Current Best Practices

If you’re placing fractions on a page, my suggested workflow is:

• Use HTML entities if the fraction is common and you are not using an OpenType font.
• If you are using an OpenType font or if the fraction is not common, linearize the enumerator and denominator. Remember to use the correct divisor symbol.
• Turn on fractional substitutions for paragraphs and other content using CSS3. Linearized fractions displayed in an OpenType font that supports glyph substitution will be converted automatically. Consider making the declaration part of your default CSS stylesheet; alternatively, create a class that may be applied to spans where the effect should be used.

There are many more powerful and fun features in OTF typefaces that I’ll explore in future articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.