And the heart; and & diam; in HTML show as black on Android even if color is set as red in CSS
I am developing a card game in HTML, JS and CSS using the Meteor framework. I use ♥
for costume for hearts and ♦
for costume dimonds. The color is set to red using color: #FF0000;
CSS. The font family is installed with font-family: 'Times', serif;
. On a desktop PC, Mac or iPhone, they appear as red icons, but on Android using Chrome, they appear as black. However, the rank still displays as red, which makes me think this is typical of the icons themselves.
Before displaying the suit string, I run the code through the SafeString function in space.
suitString: function(suit) {
var suits = {'H': '♥', 'S':'♠', 'D':'♦', 'C':'♣'}
return Spacebars.SafeString(suits[suit]);
}
I'm guessing it has something to do with the font used to display icons on Android, but I haven't been able to figure out exactly why this is happening. Or it could be something specific to the SafeString function.
Can anyone enlighten me and is there a way to provide color across all devices without using costume images?
Thank!
source to share
I think this is a font display error for Android 5.0.x. This happens on web pages and applications. So far I've only seen this on Android 5.0.1
I cannot reproduce it on android 5.1.0 and 4.2.x
I really drove me crazy. At first I did not accept color though html tables.
Here is my test page: http://ibob.github.io/tests/html/
If you open it on Android 5.0.1 device, the solid red suits will not be dyed.
Empty suits look bad, so I think with images this is the only sane solution.
EDIT:
Actually after more digging it seems to be a TouchWiz issue (like Samsung).
In its TouchWiz updates after 5.0.1, Samsung changed the font rendering in solid color gamut to something like emoji - immune to coloration. Apparently it cannot be played on non-Samsung devices, but is playable on everyone with Android version greater than 5.0.0.
Note that HTC did a similar thing, but retained the solid colors of the suit. However, with modern HTC devices, you cannot paint peaks or clubs with a color other than black, and hearts and diamonds with a color other than red.
Other brands of devices with their custom Android models may have similar problems.
source to share
I have the same problem when using & hearts; (black heart suit as described at http://www.w3schools.com/charsets/ref_utf_symbols.asp )
On pc, you can change the color using the css color attribute. However, in android it displays in black no matter what color you specify.
I suspect the problem is that the black heart rendering android browser comes up with this black icon.
I used (white empty heart) instead, which accepts css color attribute not only for pc but also for android browser. Alternatively an image with desired color or SVG embedded in code can use any css color.
source to share