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>
No comments:
Post a Comment