Skip to page content or Skip to Accesskey List.


Main Page Content

Working With Fractions In Css And Php

Rated 4.08 (Ratings: 1)

Want more?

  • More articles in Code

Bernard Peh

Member info

User since: 15 Oct 2006

Articles written: 2

Most of us are uncomfortable with using fractions when writting programs.

If we encounter a fraction, we will first convert it into a floating point

number (with decimals) and proceed from there. Most programming languages

would prefer to use 0.5 as opposed to 1/2 because the later might conflict

with the syntax of the languages. In this article, I will discuss my attempt

to work with fractions in one of the PHP projects that I have done.

Displaying Fractions In HTML

There are a few ways to display fractions in the web. The most common way is

just to add a slash between 2 numbers, like so "1/2". There are also special

HTML characters that we can make fractions look more professional. Eg. to display

1/2, we can use the HTML code ½. However, not many fractions

are supported by HTML. So, you may be in trouble if you want to display 2/9 in HTML.

A better way to display a fraction is probably to use the superscript and

subscript tags. Using and tags, my 2/9 will

look a bit better. We can also use a "special slash" between

2 numbers instead of a normal slash ( / ). Still not satisfied? With CSS, we can

push the limit further.

If we define a css like this:

.fracNum, .fracDen {

font-size: 70%;


.fracNum { vertical-align: 0.5em; }

.fracDen { vertical-align: -0.5em; }

and when implemented with the 'sup' and 'sub' tags, The fraction will look even

better. The code will be something like:


Converting Decimals To Fraction - A Real Example

I wrote a program that let people frame their pictures online. When I was

halfway through, I was told that the program should support imperial

measurements (inches). The problem with working in inches is that very few

people would say my picture is 6.34 inch width by 9.82 inch height; Most

people would say 6 and 3/8 inch by 9 and 3/8 height for example.

The biggest problem now is that the framing engine calculates everything in

mm. Instead of rewritting the whole engine, I figured out that what I need

is just an interface to convert mm to inches. So, if I pass 300mm into a

function, it should return me 11 and 3/4 as the answer. Dividing 300mm by 1

inch (25.4mm) will leave me with a long decimal. It would be silly to try

and display a fraction for a decimal like 0.1111. The function should be

intelligent enough to round off the decimal to something that can be easily

displayed as a fraction. For example, if I round off 0.1111 to 0.125, I can

display the fraction as 1/8 instead of 1111/100000. Time is running short

and I need a simple and sweet solution.


I would like to go through snipplets of code with explaination first before

revealing everything. Feel free to jump to the end of the page and copy

the whole function if you just want to implement it in your website.

The code is written in PHP.

Part 1: Extracting the decimal in inches.

The measurement in mm is first converted to inches(with decimal).

The decimal is then isolated from the whole number and stored in a

var called $pDecimal. Now, I need to store a

list of all possible fractions with their mm equivalent in an array.

I use intervals of 1/8 for the sake of simplicity.

Part 2: Rounding off to the closest inch interval.

This is the most important step in the whole conversion process. The

foreach loop creates a new array called $tmpV which stores

the inch fraction as the key and the inch difference as the value.

We will now sort $tmpV with the minimum 'mm' value at the top

and the maximum 'mm' value at the bottom using the asort

function. We are extracting the first entry in the array because it stores

the minimum 'mm' difference. As you can see, what we are trying to do here

is to round $pDecimal off to the closest decimal value in the

$fractionOption array (ie, 0.125, 0.25, 0.375..etc).

We can now safely extract the first key-value pair in $tmpV using the

list function. The $inch var stores the inch

representation that we want.

Part 3: Cleaning Up

We do not want to display the fraction if it is ‘0/8’ or ‘8/8’ because it

is pretty much meaningless. However, if the fraction is ‘8/8’, we have

to increase the whole number by 1.

Part 4: Adding some CSS

Remember that we eliminated any fractions that are '0/8' or '8/8'?

So we only need to process any fraction that falls within the range of

'1/8' to '7/8'. By splitting the fractions into numerators and denominators,

we can now apply our CSS technique mentioned above.

The Whole Thing

As promised, the full code is displayed below:

The sourcecode can be dowloaded at


I hope that the decimal to fraction conversion solution shown in this

tutorial is straight forward and easy to implement. The script rounds

off any decimal value to the closest one-eighth of an inch. If you want

more accuracy, you can make your fraction interval smaller, for example

1/16 or 1/32...and so on. The logic used in this example can be easily

applied to other programming languages. Feel free to try the online framing

program at Make sure you select

the inch option to see fractions in action.

Bernard Peh is the IT project lead at CPM. He loves philosophy and is passionate about open source technologies. During his free time, he maintains his Think LAMP blog.

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.