Monday, 19 August 2013

Pixel(px) to EM Converter

It helps the user to provide the whole CSS file with Base value of conversion from "px" to "em" and hence converts all the pixel values to EM values 

This sample is a easy one which includes the use of Javascript and Regex

This sample will help one in converting all the values in px to EM by just providing the base conversion value. One has to just copy and paste the whole CSS file and it will provide you the output CSS in EM format.
Javascript replace() method is used with Regex searches all the px values and replace it with the corresponding EM value. for a specified value.
Only constraint is that the class names which are present in CSS file should not be in format example: ".bodySize2px", ".labelSize2px", ".paddingvalue10px" etc.


The problem this sample will solve is that many of the times in web application we need to do that, so for achieving this very quickly just add the HTML page provided in this solution to your web application and do the conversion on the fly. Although there are other option available on the World wide web but this i think will help to keep the things local to your system and achieve it very quickly.
For choosing base values you can refer the table below:

Pixels
Ems
Percents
Points
6px
0.375em
37.5%
5pt
7px
0.438em
43.8%
5pt
8px
0.500em
50.0%
6pt
9px
0.563em
56.3%
7pt
10px
0.625em
62.5%
8pt
11px
0.688em
68.8%
8pt
12px
0.750em
75.0%
9pt
13px
0.813em
81.3%
10pt
14px
0.875em
87.5%
11pt
15px
0.938em
93.8%
11pt
16px
1.000em
100.0%
12pt
17px
1.063em
106.3%
13pt
18px
1.125em
112.5%
14pt
19px
1.188em
118.8%
14pt
20px
1.250em
125.0%
15pt
21px
1.313em
131.3%
16pt
22px
1.375em
137.5%
17pt
23px
1.438em
143.8%
17pt
24px
1.500em
150.0%
18pt


Source Code:


<!DOCTYPE HTML>
<html>
<head>
    <title>PX to EM Converter</title>
    <script type="text/javascript" language="javascript">

        function PixelToEM() {
            var pixelArea = document.getElementById("taPixel");
            var emArea = document.getElementById("taEM");
            var baseSizeTextBox = document.getElementById("txtBaseSize");
            var pxVal = pixelArea.value.match(/\d+px/g).toString().split(',');
            var lengthValue = pxVal.length;

            var pxToEmAnswer = pixelArea.value;
            for (var index = 0; index < lengthValue; index++) {
                var valueToBeReplced = pxVal[index].replace(/px/g, "");
                var valueToBeReplcedExp = new RegExp(pxVal[index], "ig");
                pxToEmAnswer = pxToEmAnswer.replace(valueToBeReplcedExp, ((1 / parseInt(baseSizeTextBox.value) * valueToBeReplced).toFixed(3).toString() + 'em'));
            }
            emArea.value = pxToEmAnswer;

            return false;
        }


    </script>
</head>
<body>
    <label>
        Base Size</label>
    <input type="text" id="txtBaseSize" value="16"></input><br/>
    <table>
        <tr>
            <td>
                <label>
                    PX</label>
            </td>
            <td style="width: 20px;">
            </td>
            <td>
                <label>
                    EM</label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <textarea id="taPixel" style="width: 500px; height: 600px;"></textarea></label>
            </td>
            <td>
            </td>
            <td>
                <label>
                    <textarea id="taEM" style="width: 500px; height: 600px;"></textarea></label>
            </td>
        </tr>
    </table>
    <br />
    <button id="btnConvert" onclick="return PixelToEM();">
        CONVERT</button>
</body>
</html>