auto text size inside text area [jQuery]

HTML

<textarea id="ta" class='area' placeholder='Your text her fa fasd fa fa sdf asdf asdf asdf asdf asdf asdf asdf asdf asd fasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdfasd fasdfasd fasd fasd fsad fasdf asdf asdf ae'></textarea>

<span id="fake"></span>

CSS

#fake {
    /*display: none;*/
    padding-top: 500px;
    position: absolute;
}

.area {
  /* Override needed textarea customized in iframe.css */
  width:  300px;
  height: 300px;
  border:  0;
  padding: 0;
  margin:  0;
    
  transition: font 0.3s ease;

  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.5);    
  position : absolute;
  outline:none;
  resize:none;

  overflow: hidden;
  vertical-align: top;
  text-align: center;
  letter-spacing: 2px;
  font-size: 17px;
}

JavaScript

$.fn.insideHeight = function(textArea) {
    return parseInt(textArea.css('height'), 10)
         - parseInt(textArea.css('padding-top'), 10)
         - parseInt(textArea.css('padding-bottom'), 10);
}

$.fn.insideWidth = function(textArea) {
    return parseInt(textArea.css('width'), 10)
         - parseInt(textArea.css('padding-left'), 10)
         - parseInt(textArea.css('padding-right'), 10);
}

var offset = 30;
var textArea = $('.area');
var tAHeight = $.fn.insideHeight(textArea);
var tAWidth = $.fn.insideWidth(textArea) - offset;
textArea.css('font-size', tAHeight);

var fontF = textArea.css('font-family');
var fontW = textArea.css('font-weight');
var lSpace = textArea.css('letter-spacing');
var fake = $('#fake');

fake.css('font-family', fontF);
fake.css('font-weight', fontW);
fake.css('letter-spacing', lSpace);

$.fn.estimateTextWidth = function(text, fontSize) {
    fake.text(text).css('font-size', fontSize);
    
    console.log('fake : ' + fake.css("width"));
    return parseInt(fake.css("width"));
};

$.fn.estimateNbLines = function(text, fontSize) {
    
    if(text.length == 0)
        return 1;
    
    var textWidth = $.fn.estimateTextWidth(text, fontSize);
    
    console.log('twidth: ' + textWidth + ', elwidth: ' + tAWidth);
    
    return 1 + Math.ceil(textWidth / tAWidth);
}

var keyupHandler = function(e) {
    
    var changed = false;
    var text = $(this).val();
    
    var fontSize = parseInt($(this).css('font-size'), 10);
    
    console.log(' FONT SIZE ' + fontSize);
    var estimatedNbLines = $.fn.estimateNbLines(text, fontSize);
    
    console.log('New approximation: ----------------------');
    
    while(fontSize * estimatedNbLines > tAHeight) {
        fontSize -= 1;
        estimatedNbLines = $.fn.estimateNbLines(text, fontSize);
        
        console.log('decreasing: ' + fontSize);
        changed = true;
    }
    
    if(changed) {
        $(this).css('font-size', fontSize);
        //$(this).val(text);    
   ...