In Chrome for Android, the font color remains the same for spades, diamonds, hearts, and clubs regardless of their styles

When viewing a page in the Google Chrome browser on Windows, I noticed that card suit symbols (spades, hearts, diamonds, clubs) were correctly colorized using the "style" attribute. However, upon viewing the same page in Google Chrome on Android, the colors I had defined were not displayed and instead default black and red colors were used. This issue was clearly visible in the attached picture.

Here is the 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 />

https://i.sstatic.net/1nu8K.png

  1. I am curious if there is a way to make Google Chrome on Android display the selected colors as well?

  2. Additionally, I am interested in understanding why Chrome on Android defaults to predefined colors rather than user-defined colors.

htmlcssplaying-cards

Answer №1

Emily shared an insightful response in a related query: Adjusting font color of HTML Symbol

This method has worked effectively for me:

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

I appreciate your help.

Answer №2

Update: After testing, it has been confirmed that this method does not work on Android devices. It appears that Android does not support applying a monochrome font for symbols like Emoji that have colorful variants.

This is disappointing as it goes against the Unicode recommendation. The Emoji Presentation Sequences include all four characters in question, indicating that compliant implementations should be able to display both text and emoji variants.

Therefore, the suggestion mentioned in a comment to draw a glyph with its shadow or background under transparent text color (or fill) may be the only feasible workaround.

You can try adding variation selector 15 (&#65038;) after each character. This should compel all clients to select the "monochrome" font variant, allowing the colors to be displayed according to 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 />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

javascriptjqueryhtmljsonajax

What is the method for distributing additional width in a table among its columns?

Have you ever wondered how excess space in an HTML table is distributed among the columns? I too was curious about this, but couldn't find a definitive answer even after extensive searching. Therefore, I decided to create a simple test page to investi ...

htmlcssbrowserhtml-table

Attempting to replicate a <textarea> to behave like a <div> element

I am currently facing an issue with my HTML and CSS code. I have tried to construct a design using a <div> but it resulted in horizontal scrolling and looked chaotic. How can I make the CSS and HTML look the same without any issues? <textarea c ...

htmlcss

Modify the CSS of CKEditor using JavaScript after the instance has been initialized

When creating a CKEditor instance, the following steps are typically taken: require_once 'ckeditor/ckeditor.php'; $CK = new CKeditor(); $CK->basePath = './ckeditor/'; $config = array(); echo '<textarea name="content" id="con ...

javascriptcssckeditor

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

javascriptjqueryhtmlcssslider

Unusual quirks observed while applying styles to a button in Firefox

For making circular buttons in Bootstrap 4, I use the following CSS style: .btn-circle { width: 50px; height: 50px; padding: 6px 0px; border-radius: 50%; font-size: 1.5rem; text-align: center; } Here is the HTML code I implement: & ...

htmlcssbootstrap-4

Interplay between Node.js and a Website

I have a node.js app running on my computer that receives items from steam users. I want the app to send the item information to a website to store in a database. The challenge is that my website host doesn't allow remote SQL connections, so I can&apo ...

phphtmlnode.jsrequestxmlhttprequest

Include category to the smallest element

I am attempting to use JQuery to find the height of the tallest element and then add that height to other elements that are shorter. My goal is to assign the class, main-nav-special-padding, to these shorter elements using my current JQuery code. I tried t ...

javascriptjqueryhtmlcss

The unexpected behavior of nesting in CSS class selectors

Here is a paragraph element I'm working with: <p class='big bold'>Some random text</p> I attempted to style it using the following code: p .big{ font-size:60px; } p .bold{ font-weight:bold; } Unfortunately, the stylin ...

htmlcsscss-selectors

How can CSS and DIVs be utilized to align two smaller content boxes alongside one larger content box?

I'm trying to use CSS to create a layout with three div tags arranged in a specific way. I want two small content boxes stacked on each other, with a small space between them, to the left of a large content box. Any suggestions on how I can achieve t ...

csscss-float

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

htmlcssflexboxbootstrap-5

Getting rid of the standard border around images

I've been searching for a while now, but I can't seem to find a solution to fix this specific issue. On a webpage, I have an image (<img...>) that, when it loads, shows a 1px solid white (or very light grey) outline or border on the outermo ...

htmlcss

What is the best method to adjust the scrollbar to the correct position on the table?

Currently facing an issue with adding a scrollbar on the right side of my table. I have tried using a jQuery plugin called table_scroll.js but encountering difficulties. The problem can be seen in this image: https://i.sstatic.net/XqLBD.png. Any assistan ...

jqueryhtmlcssbootstrap-table

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

jquerycssshow

What methods can be used to beautify Html 5 files in Java or Groovy?

Is it possible to pretty-print HTML5 files using libraries in Java or Groovy? While I know there are classes available for pretty-printing XML in Groovy, it won't work for HTML5 since it's not necessarily well-formed. Are there any solutions spec ...

javahtmlgroovypretty-print

When utilizing dynamic binding within *ngfor in Angular 4, the image fails to display properly

I'm encountering an issue with an <img> tag that isn't behaving as expected in my code snippet: <div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member"> <div class="fm-wrapper"> ...

htmlcssangular

Guide on incorporating interactive visuals or features within a panoramic image viewer through the use of THree.js and webGL

Seeking advice on how to incorporate more images and hyperlinks within a panoramic viewer, similar to the examples below: This particular link Panorado js viewer. I have noticed that these viewers feature embedded hyperlinks and overlays, I have attempt ...

javascripthtmlthree.jswebglpanoramas

Looking to replicate a Modal that I designed, but unsure which elements need altering in order to achieve this. I am hoping to create three duplicates of the Modal

This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification ...

javascripthtmljquerycssmodal-dialog