Displaying fractions in HTML

Here, I try out the various ways of generating fractions on-screen in HTML. To begin with, I've set the page to display in Times New Roman. As we'll see, entities and Unicode are great for some fractions, but there are only 7 available, and we might need to generate our own from time to time. Here's how I developed the build-it-yourself HTML/CSS fraction:

Generating fractions using entities and unicode:

½ = 1/2
¼ = 1/4
¾ = 3/4
= 1/8
= 3/8
= 5/8
= 7/8


Unfortunately, these are the only fractions available ready-made, and as you can see they don't all match exactly in appearance (the last 4 only work in some typefaces, so these four are in Verdana - Times New Roman just produces a question mark!). Let's see what happens when we use a standard forward-slash and sub- and super-script tags instead:

Generating fractions using <sup> and <sub> tags:

1/10 = 1/10
3/10 = 3/10
7/10 = 7/10
42/43 = 42/43
8/9 = 8/9
3/1000 = 3/1000


Now let's try to refine these by reducing the font sizes of each super- and sub-script to try to keep each fraction "symbol" more closely within the leading...

Reducing the size of <sup> and <sub> fractions with <font size="-2"> tags:

1/10 = 1/10
3/10 = 3/10
7/10 = 7/10
42/43 = 42/43
8/9 = 8/9
3/1000 = 3/1000


OK. Now let's try reducing the amount of coding by achieving the same thing using a CSS class of .frac

Generating fractions using CSS:

1/10 = 1/10
3/10 = 3/10
7/10 = 7/10
42/43 = 42/43
8/9 = 8/9
3/1000 = 3/1000


Groovy! Now to compare the original entities and their CSS-generated counterparts in context (ie with text around them):

Comparing entities and CSS fractions in context:

"If I only wanted to buy half a pie, would I ask for ½ a pie or 1/2 a pie?"


OK. Not bad. The 2 is rather too low, though, so how about leaving the .frac class associated with it but removing the subscript tags and replacing them with a span? Let's do that. Also, the standard forward-slash is more upright than in the fraction entity, so let's use the &frasl; entity for that. Here's the new version, entity first, then CSS version:

Comparing entities and CSS fractions (revised):

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?"


Now we're cooking with gas! The coding is a little complex compared to using an entity, but at least we've got fraction-generating code that can make any fraction we want! Here's the code:

CSS:        body {font-size: 16px;}
                .frac {font-size: 10px;}

HTML:   <sup class="frac">1</sup>&frasl;<span class="frac">2</span>

GIVES:   12

Just substitute your numbers!


Comparing entities and CSS fractions (revised):

A table containing some example coding and its results:

CODERESULTMAGNIFIED
<sup class="frac">3</sup>&frasl;<span class="frac">4</span>3434
<sup class="frac">18</sup>&frasl;<span class="frac">43</span>18431843
And we're not limited to numbers either: 
<sup class="frac">12,345</sup>&frasl;<span class="frac">14,000</span>12,34514,00012,34514,000
<sup class="frac">15&frac12;</sup>&frasl;<span class="frac">16</span>15½1615½16
<sup class="frac">85</sup>&frasl;<span class="frac">2</span>852852
<sup class="frac">a+b</sup>&frasl;<span class="frac">c-d</span>a+bc-da+bc-d
<sup class="frac">&chi; </sup>&frasl;<span class="frac">&lambda;</span>χ λχ λ
<sup class="frac">(4+10)</sup>&frasl;<span class="frac">(8-2)</span>(4+10)(8-2)(4+10)(8-2)

Of course, you can change the scale of the whole thing to make it more readable in a context where the whole text either side is made larger. Here's an example of a paragraph tag containing a fraction, but where the text sizes for normal text and fraction text are increased from 16 and 10 to 32 and 20:

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?"


Or, using .fractop and .fracbot classes using scaled text sizes (at 55 and 50 percent, respectively), we get a version that is perfectly scaled at all resident text sizes:

CSS:        .fractop {font-size: 55%; vertical-align: 50%;}
                .fracbot {font-size: 50%;}

HTML:   <span class="fractop">1</span>&frasl;<span class="fracbot">2</span>

GIVES:   12

Even if you change the font size of the text within which you're using this code:

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font size=16px)

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font size=32px)


It even works (with varying degrees of success) in different fonts...

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font-family: verdana;)

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font-family: sans-serif;)

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font-family: monospace;)

"If I only wanted to buy half a pie, would I ask for ½ a pie or 12 a pie?" (font-family: cursive;)

...Except the generic family 'fantasy', where you have to use a standard forward slash:

"If I only wanted to buy half a pie, would I ask for ½ a pie or 1/2 a pie?" (font size=32px, font-family: fantasy;)


Feel free to copy this idea yourself if you need to, though please consider acknowleging Meticulous Web Solutions on your site if you can, and including a link to our homepage - www.meticulous.org.uk

© 2006 Meticulous Web Solutions