« Excel 2007 New Conditional Formatting Tricks | Main | Changing from .docx to .doc in Word 2007 »

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.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


This page contains a single entry from the blog posted on August 3, 2007 1:39 PM.

The previous post in this blog was Excel 2007 New Conditional Formatting Tricks.

The next post in this blog is Changing from .docx to .doc in Word 2007.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33