0

Firefox Browser (Mozilla Firefox for Ubuntu canonical=1.0) 76.0.1 (64-bit), this simple code delivers wrong result:

Expected: both elements in blue color

Actually: &#x1F6D1 in red color, 'BLUE' in blue color

Code:

<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>This is blue:<span style="color:blue;">&#x1F6D1</span> and this is blue <span style="color:blue;">BLUE</span>.</p>

</body>
</html>

Google Chrome and Chromium Web Browser behave as expected and it's not an emoji. Any idea what is going wrong here? Thnx, hry.

harry hartmann
  • 351
  • 1
  • 9

1 Answers1

1

That's not because of the browser. That's because some unicode characters have their own style. You need to change their colors using options rather than color property.

You can explore these links for some solutions:

Stackoverflow: Change Uncide Characters Color

Color for Unicode Emoji

One solution would be text-shadow property:

color: transparent; /* needed to disable default color */
text-shadow: 0 0 0 blue;

Example:

.blue-emoji {
    color: transparent;
    text-shadow: 0 0 0 blue;
}
<h1>The span element</h1>

<p>This is blue:<span class="blue-emoji">&#x1F6D1</span> and this is blue <span style="color:blue;">BLUE</span>.</p>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Alireza HI
  • 1,873
  • 1
  • 12
  • 20
  • Google Chrome and Chromium Web Browser behave as expected. (It's not an emoji) – harry hartmann May 22 '20 at 02:14
  • so I mean it is Firefox specific. – harry hartmann May 22 '20 at 02:20
  • I tried it on chrome and it was `red`. Are you sure about that? – Alireza HI May 22 '20 at 02:50
  • Google Chrome Version 81.0.4044.138 (Official Build) (64-bit) is green, Chromium Version 81.0.4044.138 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit) as well (green). – harry hartmann May 22 '20 at 11:44
  • @HRY - It's not Firefox-specific, it's specific to anything that supports that emoji, which has its own in-built color and can't be styled in the usual way. Firefox does. Chrome doesn't (at least not on my Linux and Windows systems). Since they don't support that emoji, they show the usual "unknown character" glyph, which can be styled in the normal way. – T.J. Crowder May 30 '20 at 09:32