Internet Explorer does not change 'ß' (ß/es-zed) to 'SS' when using 'text-transform: uppercase;'

Question

Internet Explorer 9 and 10 do not change the German es-zed "ß" (ß, 'sz') to "SS" properly when using the CSS rule text-transform: uppercase;. Is this simply not implemented or is it a bug that I can handle somehow in a way of not replacing all "ß" manually?

Answer 1

This is a feature. CSS 2.1 does not define what uppercase and lowercase mean, and IE 9 treats U+00DF LATIN SMALL LETTER SHARP S “ß” so that its uppercase mapping is U+1E9E LATIN CAPITAL LETTER SHARP S “ẞ” (there is a difference, though it can be difficult to see). This happens in “standards mode”; in Quirks Mode, IE 9 treats “ß” as its own uppercase mapping.

The feature is odd, because the normal way is to map “ß” to “SS”, and the uppercase “ẞ” was added some years ago for optional use in the relatively few situations where words are uppercased so that the distinction between e.g. the names Strauss and Strauß must be retained

The CSS 3 Text Working Draft specifies that case mappings shall be applied according to Unicode, and they map “ß” to “SS”. If it will become a recommendation, then the feature turns into a bug.

As a rule, doing case mappings in CSS is unreliable. It is better to generate the content in proper case, performing mappings server-side if needed. Then you can handle any special cases separately. You could also use client-side JavaScript; in JavaScript, case conversions are Unicode-aware (one of the few areas where JavaScript has been well globalized).