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:
½ = 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:
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...
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
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):
"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 ⁄ entity for that. Here's the new version, entity first, then CSS version:
"If I only wanted to buy half a pie, would I ask for ½ a pie or 1⁄2 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>⁄<span class="frac">2</span>
GIVES: 1⁄2
Just substitute your numbers!
A table containing some example coding and its results:
| CODE | RESULT | MAGNIFIED |
| <sup class="frac">3</sup>⁄<span class="frac">4</span> | 3⁄4 | 3⁄4 |
| <sup class="frac">18</sup>⁄<span class="frac">43</span> | 18⁄43 | 18⁄43 |
| And we're not limited to numbers either: | ||
| <sup class="frac">12,345</sup>⁄<span class="frac">14,000</span> | 12,345⁄14,000 | 12,345⁄14,000 |
| <sup class="frac">15½</sup>⁄<span class="frac">16</span> | 15½⁄16 | 15½⁄16 |
| <sup class="frac">85</sup>⁄<span class="frac">2</span> | 85⁄2 | 85⁄2 |
| <sup class="frac">a+b</sup>⁄<span class="frac">c-d</span> | a+b⁄c-d | a+b⁄c-d |
| <sup class="frac">χ </sup>⁄<span class="frac">λ</span> | χ ⁄λ | χ ⁄λ |
| <sup class="frac">(4+10)</sup>⁄<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 1⁄2 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>⁄<span class="fracbot">2</span>
GIVES: 1⁄2
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 1⁄2 a pie?" (font size=16px)
"If I only wanted to buy half a pie, would I ask for ½ a pie or 1⁄2 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 1⁄2 a pie?" (font-family: verdana;)
"If I only wanted to buy half a pie, would I ask for ½ a pie or 1⁄2 a pie?" (font-family: sans-serif;)
"If I only wanted to buy half a pie, would I ask for ½ a pie or 1⁄2 a pie?" (font-family: monospace;)
"If I only wanted to buy half a pie, would I ask for ½ a pie or 1⁄2 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