Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <br>
  <br>
  <div class="textfill increase-font">Orig Content</div>
  <br>
  <div class="textfill decrease-font">tent</div>
  <br>
  <button type="button" onclick="FitAll()">Fit Text</button>
</body>
</html>
 
div.textfill{
  background-color: lightgreen;
  max-width: 222px;
  //position: absolute;
  width: 177px;
  //height: 50px;
  padding: 0px;
  font-family: Trebuchet MS, helvetica, arial,sans-serif;
  font-weight: bold;
}
​
div.increase-font{
  font-size: 15px;
}
​
div.decrease-font{
  font-size: 64px;
}
​
​
 
function measureText(pText, pFontSize, pFamily, pWeight) {
    var lDiv = document.createElement('div');
​
    document.body.appendChild(lDiv);
  
    if (pFamily != null) {
        lDiv.style.fontFamily = pFamily;
    }
    if (pWeight != null) {
        lDiv.style.fontWeight = pWeight;
    }
    lDiv.style.fontSize = "" + pFontSize + "px";
    lDiv.style.position = "absolute";
    lDiv.style.left = -1000;
    lDiv.style.top = -1000;
 
    lDiv.innerHTML = pText;
​
    var lResult = {
        width: lDiv.clientWidth,
        height: lDiv.clientHeight
    };
​
    document.body.removeChild(lDiv);
    lDiv = null;
​
  return lResult;
}
 
/**
 * @requires jQuery
 * @param el a jQuery element
 */
function fitText(el){
  var text = el.text();
  var fsize = parseFloat(el.css('font-size'));
  var fam = el.css('font-family');
  var weight = el.css('font-weight');
  
  var measured = measureText(text, fsize, fam, weight);
  
  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseFloat(el.css('font-size'));
      var m = measureText(text, fsize, fam, weight);
      if(m.width > el.width()){
        el.css('font-size', fsize-0.25 + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseFloat(el.css('font-size'));
      var m = measureText(text, fsize, fam, weight);
      if(m.width < el.width()){ // not sure why -4 is needed (often)
        el.css('font-size', fsize+0.25 + 'px');
      }
      else{
        break;
      }
    }
  }
}
​
function FitAll(){
  var newContent = [
    'gonna make it really, really long',
    'shorter'
  ];
  
  $('.textfill').each(function(index, el){
    $(el).text(newContent[index]);
    //console.log($(el)[0].style);
    fitText($(el));
  })
}
​
$(document).ready(function(){
  console.clear();
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
spencerwasdenpro
0viewers