How To Adjust Fontsize To Fit Textarea Width And Height As Much As Possible?

I enter text into a textarea. I wish the fontsize to be adjusted dynamically such that the text fills up the available textarea with type as much as possible. For this I use a span

Solution 1:

The tricky part is the algorithm for how much to decrease the fontSize. Here's two solutions to it. The first one is the ugliest code you've ever seen (Sorry it's 4:30am here and I'm tired) but it demonstrates the solution, recursive functions

$(document).ready(function() {
  var textAreaHeight = $('#inp').height();
  var fontSize = 200;
  var font = fontSize + "px";

  $('#inp').css("font-size", font);
  $('.hidden').css("font-size", font);

  $('#inp').keyup(function() {
    var txt = $(this).val();
    $('#hiddenSpan').html(txt);

    fontSize = decreaseFontSize(fontSize);
    font = fontSize + 'px';

    $('#inp').css("font-size", fontSize + 'px');
  })

  function decreaseFontSize(tempFontSize) {
    var textHeight = $('#hiddenSpan').height();
    if (textHeight > textAreaHeight) {
      var factor = .99; /* Arbitrary scaling factor */
      tempFontSize *= factor;
      $('#hiddenSpan').css("font-size", tempFontSize + 'px');

      return decreaseFontSize(tempFontSize);
    } else {
      return tempFontSize;
    }
  }
})

The second one is cleaner but simply adds another row whenever you reach the end.

$(document).ready(function() {
    var textAreaHeight = $('#inp').height();
    var fontSize = 200;
    var inputLength = 0;
    var font = fontSize + "px"

    $('#inp').css("font-size", font);
    $('.hidden').css("font-size", font);

    $('#inp').keyup(function() {
        var txt = $(this).val();
        $('#hiddenSpan').html(txt);

        var textHeight = $('#hiddenSpan').height();

        if( textHeight > textAreaHeight ) {
            var font = decreaseFontSize( textHeight) + "px";
            $(this).css("font-size", font);
            $('.hidden').css("font-size", font);
        }
    })

    function decreaseFontSize( textHeight) {
        fontSize = textAreaHeight/(textHeight/fontSize); /* textHeight / fontSize will tell you how many rows are currently in the #hiddenSpan and will then fit those rows inside the height of the textArea */
        return fontSize;
    }
})

Now really, the main part of the answer which makes both of these solutions work is that I added this to your #hiddenSpan

#hiddenSpan {
  max-width: 300px; /* Makes the text wrap like the input box */
  display: inline-block; 
  word-wrap: break-word; /* Paired with display, allows the text to wrap */
  font-family: "Times New Roman", Times, serif; /* Added the same font to both elements so that they could actually be coordinated */
} 

After testing both of these with as many characters as my little fingers could muster, I noticed the recursive function does slightly better, but not as much as you would think.