Handling ß with "font-variant:small-caps"

Question

Im am using: font-variant: small-caps; for some elements such as <h1>, <h2>, ...

However, in German language there is no cap equivalent for the special character "ß" (sharp s). ("ß" never occures at the beginning of a word).

German ortography says that in case of cap or small cap writing the "ß" must be replaced by "ss". I wonder why the browser is not handling this.

The auther of the text on a CSS does not always know if his text will be shown in caps or not. So I would like to use a CSS declaration that replaces "ß" with "ss", however I don't believe this declaration exists.

Any suggestions?

Answer 1

This is an interesting issue. In 2007 there was actually a proposal to introduce an uppercase variant of Unicode character (http://std.dkuug.dk/jtc1/sc2/wg2/docs/N3227.pdf). This passed and made it into the 2008 Unicode set as U+1E9E (ẞ):

ẞ // uppercase
ß // lowercase

However, there simply is no small-caps equivalent.

"Capital Esszet" is not even used in any official orthography in the world, and of course neither is the small capital form of it used in any phonetic alphabet. Therefore you don't have a Unicode codepoint for it. [source]

A Hacky Workaround

text-transform:uppercase converts "ß" (the regular Eszett) into "SS" (two S characters). In contrary to that, text-transform:lowercase converts "ẞ" (the Unicode uppercase) into "ß" (the regular Eszett).

This allows us to create a hacky workaround for font-variant:small-caps by combining text-transform:uppercase with a reduced font size:

<p class="small-caps">abcß</p>

.small-caps {
    text-transform:uppercase;
    font-size:75%;
}

Here is a JSFiddle demo showing all the possibilities.