adapting text to container

adapting text to container

by pinkynrg

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="testing"></div>

CSS

.container {
  background-color: red;
  text-align: center;
}

.text-wrapper {
  display: inline-block;
  white-space: nowrap;
}

JavaScript

function maximizeFontSize($target) {
	
  var testingFont = 1000;
	$target.find(".text-wrapper").css("font-size", testingFont+"px");
  
  var textWidth = $(".text-wrapper").width()/1000;
  var textHeight = $(".text-wrapper").height()/1000;
  var width = $(".container").width();
  var height = $(".container").height();
  
  var kWidth = width/textWidth;
  var kHeight = height/textHeight;
  var fontSize = kWidth < kHeight ? kWidth : kHeight;
  
  // finally
  $(".text-wrapper")
  	.css("font-size", fontSize+"px")
    .css("line-height", height+"px");
}

///////////////////////////////////////////////////////////////////////
// TESTING!!!! ////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////

//for (var i=0; i<15; i++) {
	var fonts = ['Palatino','Garamond','Bookman','Verdana','Comic Sans MS'];
  var randomFont = fonts[Math.floor(Math.random()*fonts.length)];
	var width = Math.floor(Math.random() * 500)+50;
  var height = Math.floor(Math.random() * 500)+50;
  var $test = $(".testing").append(() => {
    return $("<div>")
      .css("width",width+"px")
      .css("height",height+"px")
      .css("font-family",randomFont)
      .addClass('container')
      .html(() => {
        return $("<div>")
          .addClass("text-wrapper")
          .html("GOTTA LOVE IT!");
      })
  });
//}

maximizeFontSize($test);