I have developed a function that calculates the maximum size of text:
function CalculateMaxTextSize(width, height, text)
{
var ourText = $('span').css('font-weight', 'bold').text(text);
var fontSize = 20;
ourText.css('font-size', fontSize);
do {
fontSize = fontSize - 1;
textHeight = ourText.height();
textWidth = ourText.width();
ourText.css('font-size', fontSize);
} while ((textHeight > height || textWidth > width) && fontSize > 1);
return fontSize;
}
This function works accurately for single-line texts. However, I am facing difficulties calculating it for two or more lines. When debugging in Chrome, I received the following message: https://i.stack.imgur.com/4TO3P.jpg
Although line breaks exist, the function still treats it as a single-line text.
MODIFIED VERSION
To address this issue, I made modifications to my function (thanks gaetanoM):
function CalculateMaxTextSize(width, height, text)
{
var ourTextArr = [];
var texts = text.split('\n');
var fontSize = 20;
$.each(texts, function (index, value) {
if (value != '') {
var ourText = $('span').css('font-weight', 'bold').text(value);
ourText.css('font-size', fontSize);
ourTextArr.push(ourText);
}
});
do{
fontSize = fontSize - 1;
var textHeight = 0;
var textWidth = 0;
$.each(ourTextArr, function(index, value) {
textHeight += value.height();
if (value.width() > textWidth)
textWidth = value.width();
value.css('font-size', fontSize);
});
}
while ((textHeight > height || textWidth > width) && fontSize > 1);
return fontSize;
}
Although the modification includes changing the font size of value.width(), it seems that value.height() remains constant. Why is this happening?