Displaying Chinese Characters in HTML with UTF-8

Wednesday 2nd September 2009

Displaying Chinese Characters in HTML

Getting extended character sets to display correctly in HTML is a bit of a minefield. There are lots of things which can trip you up on this journey.

To make things even more complicated, there are numerous different sub-sets of Chinese characters which you'll need to be able to display. for example:

simplified Chinese: 汉语;
traditional Chinese: 漢語;
Pinyin: Hànyǔ;
simplified Chinese: 华语;
traditional Chinese: 華語;
Chinese: 中文;

This article will help you get over some of the most simple obstacles

Charset

Life will be a lot easier if we make sure we're using the correct Charset: UTF-8. You'll need to make sure that you have the right <meta> content-type header in your HTML to start with:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This will need to go in the <head> section of your web page.

Server Headers

Make sure that your webserver is sending the correct HTTP content-type header as well. The Firefox developer toolbar can check your server response headers: it is under the "Information" menu.

The server should be sending a response header like this:

Content-Type: text/html; charset=UTF-8

If the "charset=UTF-8" bit is missing from the Content-Type response header, or if it says something other than "UTF-8", then this will cause you problems. Ideally, you need to fix this in your server config, but you could also use a PHP header() directive at the top of a scripted document to make sure that your server sends the correct header.

File / FTP Encoding

This one has caught everybody out at one time or another.

You must make sure that your save your document in UTF-8 format and upload the document to your webserver so that the format is preserved. Some text editors won't save in UTF-8 format. Windows users might want to look at TextPad, which supports UTF-8. As Mac user, I prefer BBEdit.

When FTPing your file up to the server, make sure that the file format is preserved. In some FTP clients, this might mean that you need to FTP the file up to the server as binary file.

This is just the beginning

There are plenty more things which can trip you up on the way to UTF-8 goodness, but these are the basics. If you have a problem trying to display extended character sets, it can usually be traced to a problem somewhere in your document encoding, be it the source files, server headers, or even the database. Good luck. We hope that this article has helped!