Question 206240 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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 recommendations.) So the answer proposed in comment drawing glyph by it’s shadow under transparent text colour is probably the only viable option.

    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 />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search