Opera's Fonts Problem: An Walkthrough

Opera is a great browser, but its default fonts setting sucks for Taiwanese users. Almost every single user in Taiwan I know has to tweak some settings before he/she can really start using Opera. Very few can live with Opera's default.

What's going on here? Well, let me show you.

Something You Have To Keep In Mind

Fonts

Before we starting to take a deeper look into fonts, you have to know what fonts are available in Taiwanese users' computer.

For a Traditional Chinese version of Windows XP, there are quite few default fonts that are capable to render Chinese characters (fully or partially):

Testing Environment

Following demostrations are made with a clean installed Traditional Chinese version of Windows XP Pro SP3 with all windows update up to 2010/05/26. The web browsers used are:

All browsers are fresh installed with default settings.

Testing Material (The Strings)

The mainly used testing strings are:

Eng（te）(st)你我他，恋爱,関係

The first three characters "Eng" are latin-1, followed by a pair of double-byte-width brackets "（）" with two latin-1 characters "te" inside, followed by a pair of single-byte-width (latin-1) brackets "()" with another two latin-1 characters "st" inside, then followd by three Chinese characters "你我他", a double-byte-width comma "，", another two Chinese characters "恋爱", a single-byte-width (latin-1) comma ",", and finally two Chinese characters "関係".

But wait! It is not that simple. Some Chinese characters are common in many different languages:

It is quite common that a Traditional Chinese web page contains characters of all three languages. This is how Taiwanese users write. So it is fair to test with such a string.

Further, almost all testing HTML files are using <html> tag with xml:lang="zh-tw" attribution to indicate that the main language used in the web page is Traditional Chinese. Some strings are remain neutral, some are specified to use different font-family such as serif and sans-serif, others are specified to use specific font. All font-size set to 36px so that any one can see the difference much easily.

The Browser UI


The first problem is Opera's UI itself. Opera's default Traditional Chinese UI font is not consistent with Traditional Chinese application convension. Let's take a closer look at it:

(IE)
(Firefox)
(Opera)

All other browsers are using 新細明體 as UI font, but Opera does not.


As you can see, Opera uses 宋体 (SimSun) as default Traditional Chinese UI font. In order to "fix" this problem, Taiwanese users have to go to Preference / Advanced / Fonts, and change all UI fonts to 新細明體:

Now it looks normal. Thanks God.
(IE)
(Firefox)
(Opera)

The Web Content

First let's load sample-01-browser.default.html into Opera. In most Windows XP systems it should look like:

and on Windows Vista or Windows 7:

None of them seems to be right. Please note: you have to watch font baseline and serif carefully to distinguish some of the characters.

Learn From Others

Before we can know what's wrong here, first let's watch how IE and Firefox behave.

Internet Explorer

Let's load sample-02-ie.fonts.html into IE:

The red arrow indicates the default rendered result, and the red square indicates where a glyph came from. So you will find out that:

  1. IE uses serif font as default web font.
  2. All latin-1 serif characters are actually Times New Roman.
  3. All latin-1 sans-serif characters are actually Arial.
  4. All latin-1 preformatted characters are actually Courier New.
  5. All double-byte-width symbol are actually 新細明體.
  6. All characters that are valid Traditional Chinese are actually 新細明體.
  7. All characters that are not valid Traditional Chinese but valid Japanese Kanji are acutally MS PGothic.
  8. All characters that are not valid Traditional Chinese nor Japanese Kanji, but valid Simplified Chinese, are actually SimSun.

IE does not doing right here. But we are not going to fix IE anyway.

Firefox

Let's load sample-03-firefox.fonts.html into Firefox:

The red arrow indicates the default rendered result, and the red square indicates where a glyph came from. So you will find out that:

  1. Unlike IE, Firefox uses sans-serif font as default web font.
  2. All latin-1 serif characters are actually Times New Roman.
  3. All latin-1 sans-serif characters are actually Arial.
  4. All double-byte-width symbol are actually 新細明體.
  5. All Chinese characters are actually 新細明體.
  6. All preformatted characters are actually 細明體.

As you can see, Firefox is doing better then IE.

Look At Opera

As to Opera, it is much complicated. On Windows XP, loading sample-04-opera.fonts.xp.html into Opera:

The red arrow indicates the default rendered result, and the red square indicates where a glyph came from. So you will find out that:

  1. Just like IE, Opera uses serif font as default web font.
  2. All latin-1 serif characters are actually Times New Roman.
  3. All latin-1 sans-serif characters are actually Arial.
  4. All serif double-byte-width symbol are actually smoothed MS PMincho.
  5. All serif characters that are valid Japanese Kanji are actually MS PMincho, and all smoothed except first glyph.
  6. All serif characters that are not Japanese Kanji but valid Simplified Chinese are actually not-smoothed SimSun.
  7. All sans-serif double-byte-width symbol are actually smoothed MS PGothic.
  8. All sans-serif characters that are valid Japanese Kanji are actually MS PGothic, and all thinner except first glyph.
  9. All sans-serif characters that are not Japanese Kanji but valid Simplified Chinese are actually SimHei.

On Windows Vista/7 or Windows XP with 微軟正黑體 installed, something changes. Let's load sample-05-opera.fonts.vista7.html under the condition mentioned above:

The red arrow indicates the default rendered result, and the red square indicates where a glyph came from. So you will find out that:

  1. Just like IE, Opera uses serif font as default web font.
  2. All latin-1 serif characters are actually Times New Roman.
  3. All latin-1 sans-serif characters are actually Arial.
  4. All serif double-byte-width symbol are actually smoothed MS PMincho.
  5. All serif characters that are valid Japanese Kanji are actually MS PMincho, and all smoothed except first glyph.
  6. All serif characters that are not Japanese Kanji but valid Simplified Chinese are actually not-smoothed SimSun.
  7. All sans-serif double-byte-width symbol are actually smoothed MS PGothic.
  8. All sans-serif characters that are valid Japanese Kanji are actually MS PGothic, and all thinner except first glyph.
  9. All sans-serif characters that are not Japanese Kanji but valid Simplified Chinese are actually 微軟正黑體. (No more SimHei here.)

We have not done yet. Now let's load sample-06-opera.fonts.pre.01.html into Opera to see how about the preformatted text font:

The red arrow indicates the default rendered result, and the red square indicates where a glyph came from. So you will find out that:

  1. Almost all preformatted latin-1 characters are actulaly Courier New.
  2. All preformatted double-byte-width symbol are exactally like serif, i.e., smoothed MS PMincho.
  3. All preformatted characters that are valid Japanese Kanji are like sans-serif, i.e., MS PGothic, but not thinner at all.
  4. All preformatted characters that are not valid Japanese Kanji but valid Simplified Chinese are like serif, i.e., SimSun, but smoothed.

You might also noticed that the single-byte-width brackets are not match to each other. Let's load sample-07-opera.fonts.pre.02.html into Opera to take a closer look at this issue:

In this sample file, there are some extra testing material:

!@#$%

There are five symbol, first with two leading space, second with leading double-byte-width asterisk "＊".

The green square indicates what behaves normal, and the red square indicates what behaves wrong. So you can see, any double-byte-width symbol followed by some single-byte-width symbol makes the single-byte-width symbol(s) fall into the wrong font.

What Should Be Done

So what would be the right fonts? First let's think about serif fonts. Please load sample-08-opera.fonts.ideal.01.html into Opera:

  1. All latin-1 serif characters should be Times New Roman.
  2. All Chinese serif characters should be 新細明體.

As to sans-serif fonts, we have to consider siturations with or without 微軟正黑體 available. On Windows XP without 微軟正黑體, it should be like what sample-09-opera.fonts.ideal.02.html shows:

  1. All latin-1 sans-serif characters should be Arial.
  2. All Chinese sans-serif characters should be 標楷體.

On Windows Vista, Windows 7, or Windows XP with 微軟正黑體, it should be like what sample-10-opera.fonts.ideal.03.html showns:

  1. All latin-1 sans-serif characters should be Arial.
  2. All Chinese sans-serif characters should be 微軟正黑體.

So how about preformatted text fonts? Let's rock sample-11-opera.fonts.ideal.04.html with Opera:

  1. All preformatted characters should be 細明體 (標楷體 will do, too.)

Note: In case you want to see all test in one page, use sample-12-lineup.html.

Yet More Problems

Theoretically, Taiwanese users may be able to tweak Opera to fix the fonts problem. But the truth is, there are more problems:

  1. The xml:lang attribution on any XHTML element will not effect how Opera use fonts.
  2. Changing Chinese traditional fonts in the Preference / Advanced / Fonts / International Fonts... opetion will not help. (Note: this in fact works with Opera 10.10, but not with 10.5x. Something is broken here. Another Note: even this works with Opera 10.10, the default auto-select-font mechanism somehow fails in Opera 10.10.)
  3. Changing the serif font in the Preference / Advanced / Fonts does not always work.

There are two more sample files to show the problem here:

You may think that these two sample mixed several Simplified Chinese and Japanese Kanji characters so that Opera screws up. Well, take a look at this fully Traditional Chinese sample sample-15-fonts.change.via.Serif.Kanji.html, in order to change its fonts, one still have to:

It is still unclear how or why Opera changes its fonts behavior according to actual web content. For years, Opera does not play good with Traditional Chinese content, and all Taiwanese users are looking forward to someday Opera finally fixed these problems. Until that day, Taiwanese users have no choose but change Traditional Chinese fonts, Simplified Chinese fonts, Japanese Kanji fonts, and all serif fonts and sans-serif fonts, just for using Traditional Chinese web content. How sad.