2

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?

Peter Hellerhoff
  • 21
  • 1
  • 2
  • This is an interesting problem (I don't know how to solve), but just a question: Is this really a problem? `STRAßE` or `STRASSE`. Both look good (btw. is my spellchecker marking the first as valid and the latter as invalid...) Seems more to me as if you're trying to search problems where are basically none. – bwoebi Jun 12 '13 at 08:36

1 Answers1

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.

All possibilities

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 1
    The workaround isn’t particularly hacky, since `font-variant: small-caps` is almost always implemented using uppercase letters in reduced size, not with genuine small-caps glyphs. So using the “hack”, you are really doing the same as browsers do, just in more controllable way (you can set the amount of font size reduction) and in proper handling of “ß”. – Jukka K. Korpela Jun 12 '13 at 11:21