Question

Have this strange problems on some pages that rendering of umlauts (åäö) gets wrong in IE8 and IE9, sometimes. The encoding is utf-8 (mostly of the site works so I know it’s correct) and I have tried to narrow down the css-classes and it seems that Verdana is only affected. Tried different computers as well.

I thougth I could be the meta X-UA-Compatible-related and changed to this tag with no luck.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This is what it should look like:

And this is the result in IE8 and IE9

Answer 1

The problem manifests itself because, although the text is encoded in valid UTF-8, the decomposed Unicode normalization form is used, see Unicode equivalence. It seems that on Windows many fonts work best when using usual single precomposed characters, not the sequences of base letters with combining diacritical marks separately followed.

For example, let’s take a look at the word från with a hex editor.

On your site it’s encoded as 66 72 61 CC 8A 6E (i.e. latin small letters f, r, a, then U+030A code point representing combining ring above, then n).

But in Windows the usual encoding would be 66 72 C3 A5 6E (i.e. latin small letters f, r, å, n). So the letter å would normally be represented by a single code point U+00E5 (not by the sequence U+0061, U+030A).

If you are using PHP, try normalizing the text with the Normalizer class first (just be sure the intl extension is installed).