CSS: August 2007 Archives

Fractions in CSS

| | Comments (0)

If you want to use fractions (e.g. "1/2") the "number slash number" solution is usually fine for most documents, but you can use CSS to make prettier smaller scale fractions...but is a wee cumbersome.

Note: This solution was originally developed by Lars Bruzileus

First you have to shrink the numerator and the denominator to something like 75% - the slash stays at 100%. Then you have to raise the numerator up slightly (by .5 ex). You can also adjust the letter spacing depending on your font.

.den {font-size: 75%;}
.num {font-size: 75%; vertical-align:.5ex}

In the HTML the code looks like this:

<span class="num">1</span>/<span class="den">7</span>

And here's what it looks like:

1/7

Although I didn't like CSS for superscripts, I do think they are just the trick for vulgar fractions.