Adjusts the font size based on the size of the HTML container and how much text is displayed

When doing HTML related things often encounter such a problem, the size of the container (length x width) fixed, the container contains content (especially text) how much is not fixed, this time let people very distressed, the font size is set to how much is appropriate? Here's a look at my solution:

The first thing to know about the page is that the size of the PX refers to the width and height of the font, that is, 35px display a Chinese character, which takes up 35x35 space. Knowing this, we can find a way to dynamically display text based on the size of the container and how much it contains.

The first thing to do is to calculate the length of a string (a Chinese character in one, an English character 0.5), I use a simple judgment here, when the mosquito Unicode code is greater than 255 when the calculation of a Chinese characters, less than 255 when the calculation of 0.5 kanji characters:

var l=0.0;  for (var in str) {    L+ = (str.charcodeat (i) >255) 1:0.5;} L=match.ceil (L);

Perhaps you have noticed the mechanism, and at the end I rounded up the length, and if I didn't do this, I could, but for the sake of not having so many troublesome decimals, just rounded him up.

The next step is to calculate the font size, I will consider each font as a small box, the container as a large block, and then calculate how to more reasonable to fill the block with small squares. First, the direct mathematical thinking calculates the font size:

var font_size=math.floor (Math.sqrt (parseint (width) *parseint (height)/l));

The Font_size calculated here is exactly the right situation, as shown in Figure 2014-11-11 1 below

Inch	Inch	Inch	Inch	Inch
Inch	Inch	Inch	Inch	Inch
Inch	Inch	Inch	Inch	Inch

Figure 2014-11-11 1

But it's always going to be the case.

Inch	Inch	Inch	Inch	Inch
Inch	Inch	Inch	Inch	Inch
	Inch	Inch	Inch

Figure 2014-11-11 2

This situation will result in the container by the volume of these words plus two free positions burst, so it is necessary to carry out the next step, the correction, adjust the font size, accurate is reduced, know exactly the position:

var rows=math.floor (width/font_size); var lines=math.ceil (l/rows);  while (lines*rows*font_size*font_size>width*height) {   font_size--;   Rows=math.floor (width/font_size);   Lines=math.ceil (l/rows);}

This is where the sum of all the positions is detected (including the location used and the idle position) until it is exactly less than or equal to the container volume, at which point the font is the font that satisfies the requirement.

Here's a look at the full program:

Fontsize=function(width,height,str,maxsize) {varl=0.0;  for(varIinchstr) {   //Chinese characters greater than 255, English is less than 255, can also use/[\u4e00-\u9aff]/g.test (Str[i])l+= (Str.charcodeat (i) >255)? 1.0:0.5; } L=Math.ceil (L); varFont_size=math.floor (Math.sqrt (parseint (width) *parseint (height)/l));//see if I can really put it down.  varRows=math.floor (width/font_size);varLines=math.ceil (l/rows); while(lines*rows*font_size*font_size>width*height) {Font_size--; Rows=math.floor (width/font_size); Lines=math.ceil (l/rows);  }  returnFont_size>maxsize?maxsize:font_size;}

This also has the largest font settings, so that only one word, the font is too large.

All right, here we go today.

Send me~

Adjusts the font size based on the size of the HTML container and how much text is displayed