Solution 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>

Problem :

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.

Comments

Comment posted by harry hartmann

Google Chrome and Chromium Web Browser behave as expected. (It’s not an emoji)

Comment posted by harry hartmann

so I mean it is Firefox specific.

Comment posted by Alireza HI

I tried it on chrome and it was

Comment posted by harry hartmann

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).

Comment posted by T.J. Crowder

@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.

By

Leave a Reply

Your email address will not be published. Required fields are marked *