Veni; vidi; vici (Overview)

Working in a new language and character set, our team saw and conquered several surprises. This post looks at conditional CSS, forcing IE 9 to behave like IE 9 and tweaking Notepad++ to display Chinese characters. (Mr. Connelly and Ms. Snider, I hope you are pleased that I snuck some Latin into my blog post.)

Internet Explorer 8 has no Default Chinese Font

If you ever tried to view a site with Chinese characters using Internet Explorer 8, you may have witnessed the lack of a default font for Chinese – nearly all characters render as boxes.

Here is the word news in Chinese using the default font: 新闻In Internet Explorer, it looks something like . Not good. Chinese is supported in Internet Explorer, but you have to tell it that is what you want to use. So, we could ask all of our Internet Explorer users to click (in IE 8) View > Encoding > More > Chinese Simplified, but there is a better way.

This is the word "news" in Chinese using the Arial Unicode MS font: 新闻. It renders on Internet Explorer. So – we're done with the font issue, right? Not so fast. It turns out that this is one ugly font. We had passionate complaints from Chinese readers about it.

Conditional CSS Files for IE 8

Because all of the other browsers rendered the Chinese characters in the different fonts on our site, we ended up checking for Internet Explorer 8 in our master page:

<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="/style library/CSS/ie8.css" /> <![endif]-->

IE8.css contains the font family over and over wherever a font was specified in the main css file.

font-family:Arial Unicode MS, Arial, Helvetica, sans-serif;

For example:

body {font-family:Arial Unicode MS, Arial, Helvetica, sans-serif;}

This makes only IE 8 users suffer the hideous font.

IE 9

Internet Explorer 9 renders Chinese characters better than IE 8. However, SharePoint puts IE 9 into IE 8 mode via this line in the master page:

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

Removing this makes Chinese characters render better, but it also breaks some SharePoint functionality such as people picker assignments (see Matt Oslen's fix here) and "Send To" from a document library.

Traditional and Simplified Chinese Characters

Most Chinese characters are always drawn pretty much the same way, but some Chinese characters may be represented in traditional or simplified form. Frustratingly, most fonts in most browsers use a mix of traditional and simplified characters making it difficult to settle on one. We wanted to achieve 100% simplified characters, but this proved elusive. Internet Explorer 9 with the Conditional CSS File only for IE 8 (so that Arial Unicode MS is not used) worked the best using Arial and Helvetica:

Text Editor – Notepad++ Tweaks

Some of this site's content is driven by list items and content editor web parts. Copying and pasting from a robust text editor makes life much easier for changing such content. My choice is Notepad++, a free source code editor. Out of the box, if you start a new file, the default encoding is ANSI which does not work with Chinese characters. Once again, working on Windows XP, I had a problem with block characters instead of Chinese showing up. Once again, Arial Unicode MS to the rescue. Here are the steps:

1. Set your encoding to UTF-8: Menu > Encoding > Encode in UTF-8.
2. Determine or set the language of your current file. For example Menu > Language > XML.
3. Use the Style Configurator to set the font to @Arial Unicode MS any place you are using Chinese Characters. E.g., Menu > Settings > Style Configurator … > Language: XML > Style: DEFAULT > Font Style: @Arial Unicode MS.

4. Repeat step 3 for other language types you need, such as HTML.

By setting only the default text to this font, you still get nice spacing from the fixed-width Courier new font, and you will also see any place where Chinese characters are used as attributes because they will show up as blocks on XP.

One weird thing about Arial Unicode MS in Notepad++ is that it rotates the characters counterclockwise by 90 degrees, but they still read left to right. Here is "news" rendered in Notepad++ 6.1.1 .