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:

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


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!

“ From the outset, invent Partners got the balance right and were prepared to listen to our needs, whilst at the same time offering their depth of knowledge and experience. The end product we received is exceptional and has since proven its worth, fundamentally from a ‘back end’ input and management information viewpoint and importantly from a ‘front end’ consumer ease of use stance. Needless to say, we are growing our business as a result, with 80% of web business as ‘net new’. ”
Ged, Vertigrow Ltd

Contact Us

© 2022 Invent Partners Ltd | Supporters of FdA Web Design, Wakefield