CODEWITHSUNDEEP
htmlcssplaying-cards
ehmh ehmh
ehmh ehmh

Reputation: 17

spades, diamonds, hearts, clubs => styles do not change the font color in Chrome for Android

In Google Chrome browser on Windows, card suit symbols (spades, hearts, diamonds, clubs) are correctly colorized using the "style" attribute. Unfortunately, the same page displayed in Google Chrome on Android does not show the colors defined by me and instead uses the default black and red colors. (the effect was visible in the attached picture)

HTML code: (and link to project https://stackblitz.com/edit/web-platform-z2cs3t?file=index.html)

    <span style="color: #114bb8">♠ spades</span><br />
    <span style="color: #f10d0d">♥ hearts</span><br />
    <span style="color: #ff9100">♦ diamonds</span><br />
    <span style="color: #0da510">♣ clubs</span><br />

enter image description here

  1. Is it possible to somehow force Google Chrome to show selected colors also on Android?

  2. I'd also like to understand why Chrome on Android uses predefined colors and I don't accept user colors.

Upvotes: -1

Views: 229

Answers (2)

myf
myf

Reputation: 11323

Edit: tested and really doesn't work. Seems that Android lacks or refuses to apply any monochrome font for on such symbol (Emoji) that has colourful variant.

Kinda sad, since it violates Unicode recommendation: Emoji Presentation Sequences contains all four characters in question, what indicates that conforming implementations should support both Text and Emoji variants.

So the answer proposed in comment suggesting drawing glyph with it's shadow or background under transparent text colour (or better, fill) is probably the only viable workaround.

Try to add variation selector 15 (&#65038;) after each character, this should force all clients to pick "monochrome" font variant and thus let be coloured by the style.

span {
 font-variant-emoji: text;
}
<span style="color: #114bb8">&spades;&#65038; spades</span><br />
<span style="color: #f10d0d">&hearts;&#65038; hearts</span><br />
<span style="color: #ff9100">&diams;&#65038; diamonds</span><br />
<span style="color: #0da510">&clubs;&#65038; clubs</span><br />

Upvotes: 0

ehmh ehmh
ehmh ehmh

Reputation: 17

AStombaugh wrote: Possibly helpful answer to a similar question: Changing font color of HTML Symbol

Works for me:

span {
  color: transparent;
  text-shadow: 0 0 0 rgb(0, 128, 0);
}
<span>&#9899;</span>

THANK YOU.

Upvotes: 0

Related Questions