Background

In display pages like a Weibo wall, we often encounter a demand: to place text of varying lengths in a fixed-size area, but requiring the font size to automatically change to fill these areas. As shown below:

What should we do when encountering this situation?

Thoughts

Thought One: Area Method

My first reaction to the requirement was whether it is possible to calculate and obtain the total area size first, and then, based on the total number of characters, calculate the area occupied by each character (total area / total number of characters), and then set the font size based on the area occupied by each character.

Theoretically, this scheme could be feasible, but during the actual execution process, I suddenly realized that if there are tags among the characters, such as a links or img tags, how do we calculate the total number of characters? Counting these tags would definitely lead to an underestimation of the total. Of course, this problem can be resolved by filtering out the tags and calculating the actual number of displayed characters.

However, a subsequent question arises: when I calculate an area available for a font as 30px*30px, then how big should the font be? 30px? 15px? No one knows...

Not to mention, if the text contains numbers or English letters, and the width of each character is different, what should we do? How to calculate?

Thought Two: Fine-Tuning Method

Ultimately, due to too many issues, we abandoned the first plan and proposed a second fine-tuning method, which is relatively clever.

First, place the text in a container (such as a div), starting from the smallest value (e.g., 12px), and then read the height of the container at this moment, comparing whether it exceeds the maximum height. If not, increase the font size by one (13px), then compare the container's height with the maximum height again... and so on, until the size of the container is greater than the maximum height. At this point, taking the previous value gives the best font size.

Since the adjustment is of the final displayed size, this method can avoid many problems of the first plan, such as containing tags in the text and mixing Chinese and English.

Thus, a viable solution was born. However, some may ask whether this frequent adjustment of font size and constant fetching of container height would lead to performance or display issues. Initially, I had this doubt as well, but the fact proved that, including IE6, the performance was excellent, and users could not visually perceive this adjustment process.

Code

Finally, the code for this solution is as follows 【Online Debugging Portal】

//Maximum height
var maxHeight = 200;  

//Initialize font size to minimum
wordbox.css('font-size', '12px');

//Loop to modify size until it exceeds maximum height
for (var i = 12; i < 200; i++) {
    if (wordbox.height() > maxHeight) {
        //When the container height exceeds the maximum height, the last attempt value is the best size.
        wordbox.css('font-size', (i - 2) + 'px');
        //End the loop
        break;
    } else {
        //If it's less than the maximum height, increase the font size by 1 and continue trying
        wordbox.css('font-size', i + 'px');
    }
}