search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.68k stars 2.4k forks source link

Strange question mark icons in navbar #8596

Closed HerrimanCoder closed 7 years ago

HerrimanCoder commented 7 years ago

I see strange question mark icons in navbar:

strangeicons

Here is my full source code:

<!DOCTYPE html> 
<html>
<head>
    <title>Test Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

I tried that with and without the <meta charset="utf-8"> and it's the same either way. I am using Chrome 61.0.3163.100 (Official Build) (64-bit). This is a bizarre and troubling problem, especially when I'm only using a boilerplate example right off the jquery mobile examples, nothing exotic at all.

I am using Notepad++ as my code editor. I even tried copying into windows notepad, and pasting back, but nothing changed.

HerrimanCoder commented 7 years ago

I found the problem. I believe I can prove that the code samples from demos.jquerymobile.com come with pesky UTF-8 non-breaking spaces that cause those question mark icons to appear in a browser. The way I work around this is, after copy/pasting from jquerymobile into Notepad++, I have to click Encoding in NPP and do the following steps, in order:

  1. Select Encode in UTF-8
  2. Select Convert to ANSI (also under encoding)
  3. Save file

When I do that that problem goes away.

It seems like the demos.jquerymobile.com admins could do something to prevent those nasty chars from being embedded in all their code samples!?!?

dryabov commented 7 years ago

I'm not sure, but most likely for some character sets Notepad++ may convert UTF-8 non-breaking spaces (0xC2 0xA0 sequence) into corresponding codepage's non-breaking spaces (0xA0 byte for Windows-12xx codepages). Maybe a regexp replacement like [\x80-\xFF]+ to would be better solution.