**Business**]

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.

(* you may have problems viewing the fractions in the correct way because of the way this article is being formatted.)

A better way to display a fraction is probably to use the superscript and subscript tags. Using the superscript and subscript tag, my 2/9 will now look abit better. We can also use a “special slash” ⁄ between 2 numbers instead of a normal slash ( / ) to make the fraction look better. The fraction will now look like this: 2⁄9. 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

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.

**Implementation**

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. **

`define(INCH_TO_MM, 25.4);`

// 1 inch equals to 25.4mm

$inch = $mm / INCH_TO_MM;

$pWhole = explode('.',$inch);

$pWhole = $pWhole[0];

$pDecimal = $val-$pWhole;

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 call $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.**

`$fractionOption = array();`

$fractionOption[0/8'] = 0

$fractionOption[1/8'] = 0.125

$fractionOption[1/4'] = 0.25

$fractionOption[3/8'] = 0.375

$fractionOption[1/2'] = 0.5

$fractionOption[5/8'] = 0.625

$fractionOption[3/4'] = 0.75

$fractionOption[7/8'] = 0.875

$fractionOption[8/8'] = 1

```
```foreach ($fractionOption as $k => $v) {

// Converted $pDecimal back to mm to perform calculation

$tmpV[$k] = abs($pDecimal - $v);

}

asort($tmpV,SORT_NUMERIC);

`list($inch, $mm) = each($tmpV);`

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).

I 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 **

`$inch = ($inch == '0/8') ? '': $inch;`

// round off to nearest whole number if 8/8

if ($inch == '8/8') {

$inch = '';

$pWhole++;

}

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 **

`if ($inch != '') {`

$tFrac = explode('/',$inch);

$fraction = "$tFrac[0]⁄$tFrac[1]";

}

else {

$fraction = '';

}

return "$pWhole $fraction";

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:

`function mmToInch ($val) {`

```
``` $fractionOption = array();

$fractionOption['0/8'] = 0;

$fractionOption['1/8'] = 0.125;

$fractionOption['1/4'] = 0.25;

$fractionOption['3/8'] = 0.375;

$fractionOption['1/2'] = 0.5;

$fractionOption['5/8'] = 0.625;

$fractionOption['3/4'] = 0.75;

$fractionOption['7/8'] = 0.875;

$fractionOption['8/8'] = 1;

define(INCH_TO_MM, 25.4);

$val = $val/INCH_TO_MM;

$pWhole = explode('.',$val);

$pWhole = $pWhole[0];

$pDecimal = $val-$pWhole;

foreach ($fractionOption as $k => $v) {

$tmpV[$k] = abs($pDecimal - $v);

}

asort($tmpV,SORT_NUMERIC);

list($inch, $mm) = each($tmpV);

// nullify pWhole and pFraction

$pWhole = ($pWhole == 0) ? '': $pWhole;

$inch = ($inch == '0/8') ? '': $inch;

// round off to nearest whole number if 8/8

if ($inch == '8/8') {

$inch = '';

$pWhole++;

}

// strip inch and return fraction formatted in css

if ($inch != '') {

$tFrac = explode('/',$inch);

$fraction = "$tFrac[0]⁄$tFrac[1]";

}

else {

$fraction = '';

}

return $pWhole.' '.$fraction;

}

`// testing`

echo "67.885 mm is equivalent to ".mmToInch(66.885)." inches";

**Conclusion**

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 http://www.clubframeco.com/smartFramer.html. Make sure you select the inch option to see fractions in action.

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bernard Peh is a Web Developer based in Melbourne. He works with experienced web designers and developers everyday, designing and developing commercial websites. He specialises mainly in SEO and PHP programming. Visit his blog at Melbourne PHP