How can I prevent the browser from changing ß to ss?

Question

I am trying to have the following german character to display correctly: ß

Unfortunately, it displays as 'ss'. I have tried following some of the directions I found at: How can I properly display German characters in HTML? with no success.

I tried setting the meta tag to <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"> and also to <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> which didn't change anything. According to the notes on that page, utf-8 can handle any kind of non-ASCII characters at the same time.

The strange thing is that other German characters such as the ü and ö character display fine, so it is specific to the ß character, and instead of actually displaying the ß, it appears as ss.

How can I prevent the browser from changing ß to ss and instead actually have it display ß?

---

EDIT: I had a text-transform:uppercase on the line that was displaying the 'ss' instead of 'ß'. Once I removed that, it worked great!

Answer 1

I had this Problem too. I figured out after a while, that my used font (it was Trebuchet MS I think) didnt support ß and thats why it was converted To SS. Quite simple but I wasn't even dreaming of such a solution..

Edit: That issue comes up only when text-transform is set to uppercase. A ß is then converted to SS automatically.

Answer 2

I used this jQuery script on my page

jQuery(document).ready(function(){
    jQuery('p, a, strong, b, em, i, label').each(function(){
        html = jQuery(this).html();
        if (jQuery(this).children().length == 0 && html.indexOf("no-uppercase") < 0) {
            jQuery(this).html( jQuery(this).html().replace( /ß/g, '<span class="no-uppercase">ß</span>' ) );
        }
    });
});

then you can add to your css file

.no-uppercase {
   text-transform: none !important;
}

it should work