Question

Anybody understand why these special character: "Å's" get a really strange kerning? http://www.ment.no/nettbutikk/skaaler/stjerneskaal/

They look fine here: http://www.ment.no/nettbutikk/skaaler/liten-sukkertoyskal-korall/enter image description here

Was it helpful?

Solution

The first word in the copy text shown in the screen shot is “Skål”, which often looks quite normal but isn’t: the “å” is really two characters, a basic Latin letter “a” followed by U+030A COMBINING RING ABOVE. While this is correct as such, and “canonical equivalent” to the normal “å” by the Unicode standard, the reality is more obscure.

Although canonical equivalent sequences are “expected” to render the same, this often does not happen. For one thing, the font being used might not contain U+030A, and strange things may happen then. Moreover, there is really no general requirement on software, in the Unicode standard or in HTML specifications, that combining characters like U+030A be supported at all.

It is a general W3C policy, though not part of HTML specifications or drafts, that Normalization Form C be used. This includes the principle that characters like “å” are represented with their own codes, not as pairs of a basic character and a combining diacritic mark. See Character Model for the World Wide Web 1.0: Normalization (a working draft that may and probably will change substantially, but the normalization principle probably had widespread support).

In this specific case, the following CSS declaration applies to the text:

font-family: DIN,Arial,Helvetica,sans-serif !important;

What happens here is that the DIN font is used for the basic Latin letters, but not for U+030A, since that character has no glyph in the DIN font. The Arial font is used for it. Generally, when you mix a base character from one font with a combining mark from another font, you should expect diaster or worse.

The simplest solution would seem to be to use “å” as a single, “precomposed” character, U+00E5, instead of the two-character sequence. The DIN font contains it.

Another solution is to drop the use of DIN. When Arial is used, the combining mark works OK in modern browsers, as now it will be used on a base character from the same font.

Note that you may have similar issues with other characters, like “é” (e with acute accent).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top