1

I am trying to shrink a single-line-only string of text in a textbox/area. See example below. Credit to Shrinking font-size at a user types to fit in an input using Javascript for writing the code.

http://jsfiddle.net/hsdntz7y/4/

// txt is the text to measure, font is the full CSS font declaration,
// e.g. "bold 12px Verdana"
function measureText(txt, font) {
  var id = 'text-width-tester',
    $tag = $('#' + id);
  if (!$tag.length) {
    $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + txt + '</span>');
    $('body').append($tag);
  } else {
    $tag.css({
      font: font
    }).html(txt);
  }
  return {
    width: $tag.width(),
    height: $tag.height()
  }
}

function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
  var $input = $(input),
    txt = $input.val(),
    maxWidth = $input.width(),
    font = fontWeight + " " + fontSize + "px " + fontFamily;
  // see how big the text is at the default size
  var textWidth = measureText(txt, font).width + measureText(txt, font).width * .1; //padding to try to prevent cutoff letters?
  if (textWidth > maxWidth) {
    // if it's too big, calculate a new font size
    // the extra .9 here makes up for some over-measures
    fontSize = fontSize * maxWidth / textWidth * .9;
    font = fontWeight + " " + fontSize + "px " + fontFamily;
    // and set the style on the input
    $input.css({
      font: font
    });
  } else {
    // in case the font size has been set small and 
    // the text was then deleted
    $input.css({
      font: font
    });
  }
}

$(function() {
  $('#my_input').keyup(function() {
    shrinkToFill(this, 100, "", "Georgia, serif");
  })
});
input {
  font: 100px Georgia, serif;
  width: 80%;
  height: 300px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  border-width: 0;
  margin-right: 5%;
  margin-left: 5%;
  top: 25%;
}

*:focus {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="my_input" value="Type Here">

My issues are:

  • When I type spaces in between words and add more words, the string's font doesn't shrink to fit the box.
  • How can I established a maximum/minimum font size, where it stops shrinking/expanding?
  • I would like to make the text area/box and shrinkage/expansion of the text font size to dynamically adjust when the window is resized.
  • I want to make sure there are no cutoff letters at the beginning and end of the string. See picture. enter image description here

Any help would be very much appreciated. I been researching and working on this for hours and figured someone more knowledgeable than me could show me in a few minutes.

Thank you for you time.

cb64
  • 825
  • 8
  • 16
sabah
  • 111
  • 1
  • 11
  • I was looking at this yesterday and couldnt figure anything out other than its spaces that mess up the code and this is probably because there is no font size attached to character spaces. I'm curious, did you ever find anything that points toward a solution? – cb64 Feb 16 '19 at 19:01
  • Yesterday, I was researching to find out if there is a text width miscalculation that is causing the string's font size to not decrease. I visited this site:https://stackoverflow.com/questions/1582534/calculating-text-width Otherwise I have not made any progress. – sabah Feb 16 '19 at 20:02

0 Answers0