Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatic playing cards suit replacement on Android browser?

I noticed a strange behavior on my recently upgraded HTC One (4.3) - Whenever I use one of the suits ASCII character (heart, spade, club, diamond), the browser automatically replaces them to a card like design.

I attached a screenshot from the phone and the link to the page where you can see for yourself.

I only saw it on my phone and not any others, on debugger it looks like plain ASCII and no CSS design can be found.

Important to say - It does not happen on Chrome for Android, but only on the default browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
</head>
<body>
    <h1>♠♣♥♦</h1>
</body>
</html>

Has anyone encountered this behavior, and more important, how to disable it?

Example page

Screenshot from mobile

like image 461
Sgoldy Avatar asked Jan 06 '14 15:01

Sgoldy


3 Answers

I opened the following site on my HTC One X (with Android 4.3) http://www.fileformat.info/info/unicode/char/2660/index.htm and your link, and I could see the ♠ character perfectly, no substitution. So it's not an HTC thing nor an Android thing. Maybe you have something installed in your device that causes it? A custom keyboard? A browser extension?

like image 78
Luciano Avatar answered Oct 28 '22 00:10

Luciano


I don't know if this is your problem or not, but it is worth a try.

When I was learning HTML, I read that it is best to use numbers instead of names, so you could try replacing the numbers for the suits instead of names, and it might fix it.

Here they are:

&#9824; = ♠
&#9827; = ♣
&#9829; = ♥
&#9830; = ♦

And if you want to use the names, here's the list:

&spades;    = ♠
&clubs;     = ♣
&hearts;    = ♥
&diams;     = ♦

It is always good to use the numbers instead of names, or just pasting it in. If you don't do that, then you sometimes have cross-browser compatibility issues.

EDIT: Here is a sloppy way of doing it, but it would work. You could just put images of the suits in your webpage.

<p><a href="spades">...</p>
like image 38
Dozer789 Avatar answered Oct 27 '22 23:10

Dozer789


I don't have an android phone to test this but try

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
</head>
<body>
    <h1>&spades;&clubs;&hearts;&diams;</h1>
</body>
</html>
like image 25
Dustin Snider Avatar answered Oct 27 '22 23:10

Dustin Snider