I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text.
This is what I have implemented so far.
window.onload = function () {
var defaultDimensions = 300;
var boxWidth = window.innerWidth / Math.floor(window.innerWidth / defaultDimensions);
var boxes = document.getElementsByClassName('feed');
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.width = boxWidth + 'px';
boxes[i].style.height = boxWidth + 'px';
}
};
var getFontSizeStatus = function (text) {
var chars = 250; // Maximum Characters
var height = 300; // Default Height
if (text.length < chars) {
chars = text.length;
}
if ((window.innerWidth / Math.floor(window.innerWidth / height)) < height) {
height = window.innerWidth / Math.floor(window.innerWidth / height);
}
height = (height / 10) * 8; // .feed-text height is 80% of .feed's height
var size = height / chars;
return size + 'em';
}
You can find the full code on this fiddle link.
The current implementation is functional, but some adjustments are needed to ensure the font-size aligns better with the container's dimensions and text lengths.