Implementation principle of jQuery plug-in SlabText

This algorithm is applicable to English text. Step 1: The initial calculation requires three constants to constrain the results of the initial calculation. The first is the average aspect ratio of a single character in the font. Because the character height is easy to obtain, the number of words in a line is also easy to obtain, and the difficulty is the width of each character in a line. Implementation: 1. Assume that the average length ratio of a certain font is. 44518217 (the average length ratio of each font is usually different ). Implementation: 2. The character height is actually the font size, that is, the font-size (not related to line-height, line-height refers to the line height ). Each line of text must have a default font size, and we will get the result. In the end, the font size of the characters in the text is basically similar to the font size. Then, determine the number of characters required for the ideal length of a line of text. According to treemapping, assume that each character has the same height or width. Generally, the container width is known or can be obtained. The container width divided by the average width of each container is the number of characters that can be accommodated. Implementation: 3. Assuming the container width is 800 pixels, Math. floor (800/(font-size × 0.44518217) is the ideal number of characters per line. Step 2: iteratively calculate the split Text of the content that should be placed in each line into a single word (Reserved Words). The next algorithm is to make the number of characters in each line as close as possible to the ideal number of characters in each line. Implementation: create two containers, one for storing the next word of the text and the other for storing the next two words of the text. Add subsequent characters to the two containers until the ideal number of characters in each line is full. If a word is put into the second container with a little more, choose whether to put this line or change the line based on the proportion. Step 3: Make the layout of each line reach the two ends of the container, which requires proper scaling of font-size, letter-spacing, and word-spacing. Implementation: 1. make the container of each row inline-block (the actual width can be obtained), without scaling font-size, the ratio of the parent container width to the span container width determines how many times the font-size should be scaled (ratio ). 2. According to the result 1, font-size = old-font-size * ratio is the new font size of this line. 3. If the new font size is exceeded or insufficient, determine whether to control the spacing by controlling the letter-spacing or word-spacing based on whether there are multiple words.