automatisch ingevulde cm omrekenen

Ik ben bezig met een form waarin mensen zoals eerder verteld een grootte (PX), lettertype, kleur en text in kunnen vullen en dat dat vervolgens verschijnt boven het form.

Wat ik beter zou vinden is dat mensen niet 1 grootte in px invullen, maar 2 groottes (hoogte, breedte) in cm, en de pagina het omrekent naar px om het juist te kunnen laten zien in het voorbeeldje. Wel moet ik hoogte en breedte gewoon kunnen onthouden (om dat in het overzichtje op pagina 2 terug te laten komen).
Hoe kan ik dat doen. Wat ik nu heb is het volgende;

<style>
textarea {
	margin-left:100px;
}
button {
	margin-left:100px;
}
input {
	margin-left:100px;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<div id="container">
    Voorbeeld<br>
    <p id="container"></p>
</div><form method="POST" action="plaklettersverwerken2.php">    
      <b>Grootte in cm:</b><br>
      <textarea name="fontSize" id="fontSize" cols="50" rows="2"></textarea>	<br> 
      <b>Lettertype:</b><br>
      <textarea name="fontFamily" id="fontFamily" cols="50" rows="2"></textarea><br>
      <b>Kleur:</b><br>
      <textarea name="fontColor" id="fontColor" cols="50" rows="2"></textarea>	<br>  
      <b>Text:</b><br>
      <textarea name="textarea" id="textarea" onkeyup="countChar(this)" cols="50" rows="10"></textarea> <br>
		Standaardbedrag per letter:<br>
	  <textarea id="price" name="price" readonly>7.50</textarea><br>
		Het aantal tekens:	<br>
	  <textarea id="charNum" name="charNum" readonly></textarea><br>
      <input type="submit" name="go" value="Save Changes!">
    </form>	
	<button id="button">Bekijk hier het voorbeeld</button>
<script>
var container = document.getElementById('container');

document.getElementById('button').addEventListener('click', function() {

	(container.style.fontSize = document.getElementById('fontSize').value;
	container.style.fontFamily = document.getElementById('fontFamily').value;
    container.style.color = document.getElementById('fontColor').value;
    container.style.color = document.getElementById('textarea').value;
});

var textarea = document.getElementById('textarea');
var container = document.getElementById('container');

document.getElementById('textarea').addEventListener('keydown', function() {
    container.innerHTML = textarea.value;
});</script>
<script>
$( document.body )
  .click(function() {
    $( document.body ).append( $( "<div>" ) );
    var n = $( "text" ).length;
    $( "span" ).text( "There are " + n + " text.");
  })
  // Trigger the click to start
  .trigger( "click" );
</script><br>
    <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(0 + len);
        }
	  };
</script>