Justify Chinese Text Using CSS 網頁中文字左右對齊

Summary: Support for Chinese text alignment varies between different browsers. Using the following CSS rule can ensure cross-browser support to justify Chinese text with CSS.

text-align: justify;
text-justify: inter-ideograph; // this is an IE-only style

Justify Chinese Text with CSS – The Explanation

Without specifying the paragraph alignment, English has a default left alignment and this looks perfectly okay on the browser. However, for Chinese text, the same applies but as Chinese characters take up equal spaces, they will appear to have a justified alignment, except in one case when the browser tries automatically to avoid punctuation marks to appear at the beginning of the line (避頭點). This will is the convention for Chinese paragraphs, however the layout will look a bit awkward.

In order to force the browser to re-arrange the Chinese characters to fill up all the space of the line, we need to manually apply the following CSS rule to Chinese paragraphs:

text-align: justify;

This works for all browsers except IE which seems to ignore the CSS rule. We need to add another CSS rule for text-justify to force IE to fully justify the Chinese text:

text-justify: inter-ideograph; 

With these 2 CSS rules, you can justify Chinese text for your HTML page and the paragraphs will look nicely cross-browser.