Curving Text with Jquery no Hardcoding
<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">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="http://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>
