title: Curving Text with Jquery no Hardcoding
body: <p>I am using the following code to change font text of whatever typed in text box and it works great, what i want to do now is display the text as CURVE using Jquery something like below. I tried to use <a href="http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/" rel="nofollow noreferrer">http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/</a> but i see that most of the text there is harcoded and i dont want that.So in short if someone typed text in the textbox it should be displayed as curved instead of one single line\</p>
  
  <p><img src="https://i.stack.imgur.com/TO2cZ.png" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt; - &lt;/title&gt;
  
    &lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;
  
    &lt;style type='text/css'&gt;
  
    &lt;/style&gt;
  
  
  
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
              $('#ta').keyup(function(){
                  $('#float').html("&lt;p&gt;"+$(this).val()+"&lt;/p&gt;");
              });
              $("#fs").change(function() {
                  $('#float').css("font-family", $(this).val());
              });
              $("#size").change(function() {
                  $('#float').css("font-size", $(this).val() + "px");
              });
  
  });//]]&gt;  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form id="myform"&gt;
      &lt;button&gt;erase&lt;/button&gt;
      &lt;select id="fs"&gt; 
          &lt;option value="Arial"&gt;Arial&lt;/option&gt;
          &lt;option value="Verdana "&gt;Verdana &lt;/option&gt;
          &lt;option value="Impact"&gt;Impact &lt;/option&gt;
          &lt;option value="Comic Sans MS"&gt;Comic Sans MS&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select id="size"&gt;
          &lt;option value="7"&gt;7&lt;/option&gt;
          &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;option value="20"&gt;20&lt;/option&gt;
          &lt;option value="30"&gt;30&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;    &lt;textarea id=ta class="changeMe"&gt;Text into textarea&lt;/textarea&gt;
      &lt;div id="container" class="changeMe"&gt;
          &lt;div id="float"&gt;
              &lt;p&gt;
                  Text into container
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>