Chinese English left-right padding consistent end to end alignment implementation

First look at the following figure:

is a fixed-width container, the left and right padding value of 20 pixels, the result of entering a paragraph of text (Chinese also have English characters), will find that the right is not aligned at all, some places from the left side of the blank size is not 20 pixels, the feeling is not harmonious, the designer would like to arrange to be good-looking, right to

In fact, to achieve both ends of the alignment is very simple, use text-align:justify , before the "display:inline-block/text-align:justify the following table of the two sides of the layout", is also text-align:justify a wonderful application; Then, with some other tips, Can be achieved in any Chinese and English at the ends of the alignment effect.

You can click here: Chinese or English to justify the demo

We can see that there is a simple text on the demo page:

Then we click on the button to change the body, we will find that the text content obediently justified:

This alignment effect, Ie6/ie7 browser is also good support, for example, the following screenshot under the IE7:

Implementation principle
To understand the principle, we must first make clear the essence of the function of the two ends of the text in unison text-align:justify . First of all, we should know, text-align:justify is specially designed for English, who called CSS is invented by foreigners, used to achieve the two ends of the English statement. Notice here, is the alignment of the statement. Everyone should know that the English sentence is a word combination of a word, each word before using a space separated.

text-align:justifyThe reason why the English paragraph is justified is that the transparent invisible space before each English word is stretched. Note that the spaces are stretched, yes, only spaces. Therefore, when we write the next paragraph of Chinese content, text-align:justify there is no effect, with no set no difference. Why, then? Very simple, because Chinese is a Chinese character, there is no space between the characters, nature can not stretch, nature can not be justified.

What do we do? Can't Chinese just be a goner?

Of course not! Since there are no spaces between the normal Chinese characters, we can add a little to ourselves. For example, the following code:

"Ningzetao small Meat". Split (""). Join ("");
 
The result is:
 
Will find that each Chinese text has a space between characters, so, text-align:justify you can make a big divinity, to achieve both ends of the alignment!
 
OK, now the justification is implemented, but the space character is also a real character, it will occupy the width. If laissez-faire, the text will be too sloppy, reading very hard, will be when the bug proposed, how to do?
 
Very simply, we letter-spacing can use the narrowing character spacing. For example, demo page:
 
box.style.letterSpacing = "-.15em";
 
The negative value of different fonts letter-spacing , the use em of units, you can more intelligently fit each font-size text. Demo using the Microsoft Ya Black font, I roughly tested the next, -.15em is a very appropriate value, other fonts I am not known, you are interested, you can churn under.
 
At this point, our arbitrary Chinese-English alignment effect is achieved.
 
Use JS to summarize is (assuming box the text container element):
 
Ox.style.textAlign = "Justify";
box.style.letterSpacing = "-.15em";
box.innerhtml = Box.innerHTML.split (""). Join ("");
 
A few 3 lines of code, we're done!
 
Added on the following day:
The above method applies to Chinese content, if paragraph contains English fragment, will kill the original space, because three spaces will be treated as a space distance, therefore, we also need to 3 consecutive spaces left under special treatment, so the code evolved:
 
box.innerhtml = Box.innerHTML.replace (/^[\s\ufeff\xa0]+[\s\ufeff\xa0]+$/g, ""). Split (""). Join (""). Replace (/\s{3}/ G, "");