Text auto-scaling inside div

Question

This question has been asked before, but I am having errors that I hope someone can help me with. I currently have a carousel on my site's home page and each slide in the carousel is an of fixed height and a small

for text of a fixed height. The text that goes in the

can vary from a few words to a long sentence, and it will be changed to new text frequently.

I do not want to play with manually finding the best font fit size at all viewport widths for each piece of text that can go in there, so I found an article detailing all the different Javascript packages that can fit the text automatically. I tried both textFit and TextFill, and both of them a) do not preserve the font I was using and b) do not fit to the

100% of the time. There are instances where the font will scale to try to fit, but a few letters will bleed over the right side of the

or the bottom part of the letters are cut off by the bottom of the

.

The font I am using is General Sans Semi Bold, and I don't understand why the font issues would be happening since it is defined for a variety of pixel sizes.

I'm looking for suggestions on how to use these packages correctly or alternate packages or methods that will achieve this scaling font effect at different viewport widths. Any help is appreciated, thank you!

userdxCK · Answer

Hey so I saw your question and thought this would be fun to figure out. I know this is somewhat of a hack job and isn't perfect, but it works to resize your text based upon the size of the div.

What I essentially did was wrote some js to figure out the size (width and height) of the div, grab the length of the text in the div, did some magic little math to figure out what font size would fit best in that div then update the font size with js.

Have a look at what I did here:

var resizetxt = function() {
let x = document.getElementById("fittext").offsetWidth;
let y = document.getElementById("fittext").offsetHeight;
let html = document.getElementById("fittext").innerHTML;
let len = html.length; 
let sc = Math.sqrt(((x*y)/(len)))*1.15;

if (sc >= y) {
document.getElementById("fittext").style.fontSize = y*0.9 + "px";
}
else{
document.getElementById("fittext").style.fontSize = sc + "px";
}
};

var timer =  setInterval(resizetxt, 50);

#fittext {
  border: 1px solid black;
  height: 100px;
}


consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing e

just update all instances of "fittext" with the id of your div.

Text auto-scaling inside div

1 Answers