Fractions in CSS

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:


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

This entry was posted in CSS. Bookmark the permalink.

Leave a Reply