Tuesday, October 20, 2009

Asian languages do not display in IE8/XP

The Problem

Asian language characters (i.e. Chinese, Korean, Japanese, Thai, Vietnamese) render as rectangles/boxes in Internet Explorer 8 on Windows XP. The glyphs display correctly in IE7 and FireFox.

Chinese characters in IE8 before and after the solution
Click here to jump right to The Solution, or read on for a brief analysis.

The Analysis

There are two inconvenient client-side workarounds; neither is a real solution. Microsoft states a per-page workaround, but it does not work for me.

The first client-side workaround is to click the "Compatibility" button to tell IE8 to re-render the page using the IE7 rendering engine. This would require your users to click this button in order to view your site, which is not user-friendly. Also, text in HTML <select> boxes is still rendered as boxes.

IE8 Compatibility button
The second client-side workaround is to right-click the page and select:
Encoding ► More ► <problematic language>. The problem with this approach is: the encoding does not "stick"; you must re-select it for each page, and text in <select> boxes is still no different.

IE8 Encoding context menu
Microsoft's IE8 Readiness Toolkit states a per-page fix: add the following meta tag to tell IE8 to render the page like IE7. However when I add this tag, all characters still look like boxes, so this does not work.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>


The Solution

There are two solutions:
  1. Solution 1 requires a web-server change; Asian characters in <select> boxes
    will not display correctly.
  2. Solution 2 requires a client-side Windows Control Panel change; all Asian text will display correctly.
Solution 1: Web Server Change
Add to your web server an HTTP response header which instructs IE8 to render the page using the old IE7 renderer. Note: Asian characters displayed in HTML <select> boxes will not render in IE8 nor IE7; if you need that to work, skip to Solution 2.

The HTTP header that fixes IE8 Asian characters in all text except <select> boxes:
X-UA-Compatible: IE=EmulateIE7

Solution 2: Windows Control Panel change
Microsoft has tied Internet Explorer 8 directly into your computer's Regional & Language Support settings. This makes sense, but it's unfortunate for IE since Asian languages work out-of-the box with other web browsers.

To view Chinese, Korean, Japanese and other East Asian languages in all text on web pages in both IE8 and in IE7, follow this. In Windows XP go to:

Control Panel ► Regional and Language Options ► Languages

Check the "Install files for East Asian languages" option, insert your Windows XP CD-ROM, and restart when it's done:

Windows XP Regional and Language Options - Install files for East Asian languages
编码快乐!
해피 코딩!
ハッピーコーディング!
Happy coding!

6 comments:

  1. That sounds like a good solution #3, but in my case I can't tell the clients to move there ;)

    ReplyDelete
  2. Yay, Microsoft!

    Solution #0: Don't use IE, period.

    ReplyDelete
  3. It would really help if original posters identified their Windows version.

    In the case of IE8 running under XP, if Asian characters displayed correctly before the upgrade to IE8, do the following:

    Disable Asian languages support (Control Panel | Regional and Language Options | Languages -- uncheck 'Install Files for East Asian languages'); reboot; re-enable by re-checking the same box; and reboot. Voila!

    Win XP install disc will be required for the re-enable of Asian language support.

    ReplyDelete
  4. @Anonymous thanks for the tip! And I just revised to clearly indicate Windows version :)

    ReplyDelete
  5. Adding the meta tag to the HEAD section of my document didn't work for me either, until I came across this extra bit of information:

    The X-UA-compatible header is not case sensitive; however, it must appear in the Web page's header (the HEAD section) before all other elements, except for the title element and other meta elements.

    Source: http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx#SetMode

    Once I put it in after the title and before any other meta tags, it worked! Asian characters are now displaying properly!

    ReplyDelete

Was this post helpful? Do you have questions about it? Do you want to share your own programming blog? I'd love to read your feedback.

Note: Only a member of this blog may post a comment.