How to Create eBook Fractions for Cookbooks, Recipes using CSS

QUESTION: “I am creating a cookbook and have run into issues using fractions. I would like to know how to create fractions so that they have a consistent look in my ePubs and Kindle Mobi files. One issue I have run into is that some fonts do not support support fractions like 1/3 or 1/16.”

What I have noticed is that many cookbooks (ePub and Mobi) do not seem to follow a strict or uniform usage of fractions: 1/3 will look quite different than 1/2. From a design perspective your ePub Cookbook recipe measurements should all maintain a uniform look if possible.

I wish this were as easy as restricting yourself to specific fonts that DO display fractions. From a design perspective this is the logical solution. Unfortunately you run into issues with standardizing your ePub file for the various eReaders: Nook, Kindle, iPad, etc. Additionally, eReaders allow the user to switch fonts. The key is to be able to maintain a uniform look even when the font is switched.

Create eBook Fractions using HTML Special Characters

You could use a special unicode character to create your fractions. Although there are unicode entities for the most common fractions (1/2, 1/4, etc) there are not unicode entities for all variations of fractions you would find in a recipe.

To ensure consistency, I have found assigning a class to a superscript and subscript element using basic CSS, and defining the font size and vertical alignment, works very nicely.


sup.frac {
font-size: 0.6em;
vertical-align: 0.5em;
sub.frac {
font-size: 0.6em;
vertical-align: -0.1em;

Your HTML code would look like this:

<sup class="frac">1</sup>/<sub class="frac">2</sub>

Slash element “&frasl;”

Try employing the ‘&frasl; entity. This creates a slash character that looks a little more like an actual fraction slash (being slightly more horizontal) and gives the impression that the numerator is “on top” and the denominator is “on the bottom”. The slash can also be represented with decimal entity “&#8260;” and hexadecimal entity “&#x2044;”.



More on Special characters >>

Leave a Reply