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!

This doesn't really sound like an encoding issue; after all, for the browser to de-ligate the eszett, it must be recognizing it. — ruakh, Jun 14 '13 at 00:07
Please post code (and/or URL) that demonstrates the issue, and specify the browser(s) on which this happens. This is most probably caused by something that is not disclosed in the question, such as lowercase to uppercase conversion followed by uppercase to lowercase conversion. — Jukka K. Korpela, Jun 14 '13 at 05:50

Stefano L · Answer 1 · 2013-06-14T10:35:35.307

14

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.

edited Jun 14 '13 at 10:35

answered Jun 14 '13 at 00:29

Stefano L

1,486
2
15
36

Thanks for the reply. I am using Arial, which I would imagine supports that character. How can I check if it does? – zeckdude Jun 14 '13 at 02:05
Trebuchet MS contains ß. Even if it didn’t, lack of glyph would not cause two other characters to be displayed instead. – Jukka K. Korpela Jun 14 '13 at 05:52
@Jukka K. Korpela Believe it or not it was exactly because of this corresponding with uppercase letters. It DID then convert ß to ss. Im not 100% sure if it was trebuchet ms. – Stefano L Jun 14 '13 at 09:17
Here’s a demo whic sets font to Trebuchet MS: http://jsfiddle.net/pLhEG/ Please tell us which browser displays the ß as SS when accessing the demo. – Jukka K. Korpela Jun 14 '13 at 10:27
@Jukka K. Korpela http://jsfiddle.net/pLhEG/1/ Would you now please undo your down-vote – Stefano L Jun 14 '13 at 10:30
2

I would rather double my downvote. Your demo just shows that `text-transform` works as defined. It has nothing to do with fonts, so changing the font (which is what your answer suggests, to the extent that it offers any solution) does not help at all. – Jukka K. Korpela Jun 14 '13 at 11:06

score 2 · Answer 2 · answered Feb 11 '16 at 17:42

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

score 0 · Answer 3 · answered Jun 14 '13 at 00:11

0

Try uft-8. Also please note if you are outputting this information via php or asp for example or some other language the HTML encoding is not sufficient. You will require the header content type to be set aswel

answered Jun 14 '13 at 00:11

Liam Sorsby

2,912
3
28
51

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

3 Answers3

Linked