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


Chinese text justification - 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.

GreyCampus PMP online training course bundle for US$149 only

Support website running for FREE, thanks!

If you find this post helpful and if you are thinking of buying from Amazon, please support the running cost of this website at no extra cost to you by searching and buying through the search box below. Thank you very much for your help!

Edward Chung

Edward Chung aspires to become a full-stack web developer and project manager. In the quest to become a more competent professional, Edward studied for and passed the PMP Certification, ITIL v3 Foundation Certification, PMI-ACP Certification and Zend PHP Certification. Edward shares his certification experience and resources here in the hope of helping others who are pursuing these certification exams to achieve exam success.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Responses

  1. Its a good article – however text-alignment: justify; – doesn’t exist in css. It should be:

    text-align:justify;