CODEWITHSUNDEEP
javascripthtmlfonts
elunap
elunap

Reputation: 841

Increase font size by character length using javascript

Hellow, I was wondering how could I increase the font size by using as reference the characters length. What I'm trying to do is some kind of information post, which can (or not) have images, now, when a user only place text the height of the post is critical damaged in size (because of the randomness of characters the user inputs), so I was trying to develop this thing in which if the user put only text on the post the font could grow until the maximums height of the post is reached (650px) taking on consideration the characters, so few characters=bigger font, lot of characters= small font(until reach maximum font size). basically I want to find the font growing ratio by characters used.

Things to have in consideration:

If I din't explain my self correctly, please tell me, I would really appreciate this one, thanks.

Upvotes: 0

Views: 1877

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10642

Here's how I would change the font size depending on length : 

function changeFontSize() {

  var thisVal = $('#input').val(); //get input value
  $('#output').text(thisVal); //change <p> text to input text
  var fontSize = 300/thisVal.length; //alter font size depending on string length
  $('#output').css("font-size", fontSize + "px"); //set font size
  
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id='input' onchange='changeFontSize()' onkeyup='changeFontSize()'> 
<p id='output'>
</p>
</div>

The rest should be fairly easy to implement :)

Fiddle : https://jsfiddle.net/9m62qyxa/

Upvotes: 2

Related Questions