Emoji used in Card / List Titles now in Grayscale

[Liz Bedwell]

Hi, 

Has this happened to anyone else? We were using emoji in lists to help denote the status of tickets or highlight certain lists to make things stand out and easier to read at a glance.

The idea came from: https://blog.trello.com/delight-your-day-features as it also helps to keep things a little colourful and fun when working remote, to be honest.

But today I logged on and all List Titles have greyscale emoji as seen in the screenshot below. It is supposed to be a traffic light in the title like this: 🔴 🟡 🟢 ?

It is happening across all boards and on some card titles also, so it has suddenly wiped out a process that was working for task management in Trello without the need for extra plug ins and was something both Mac and Windows users could add easily via keyboard shortcuts.

[Paul Elia]

UPDATE: This was a Chromium issue that is fixed in the latest version. Update your browser!

[Paul Elia]

I just realized that this may be a Google Chrome problem and not an Atlassian Trello problem as I am seeing the same behavior in Google Calendar. ☹️

[Paul Elia]

Well, I still don't know the root cause of the change, but I now suspect that development teams for Trello and Google Calendar e.g. will actually have to change something in order to permit emoji color variants to once again manifest.

Hints:

1. https://exceptionshub.com/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascript-3.html
2. https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
3. https://en.wikipedia.org/wiki/Variant_form_(Unicode)#Variation_Selectors_block

[DollarAkshay]

I think it is the font-weight that is causing them to be displayed in greyscale. I think removing any bold/light weight from the text should fix the issue. (Just a hunch)

[Paul Elia]

I agree. I ran an experiment on Google Calendar and that's how it works there. See screen shot below.

[Paul Elia]

Note that in this example all of my emojis are in a bulleted list, and they all have hyperlinks, so that's why there is a bullet to the left of each section of the message body and an underline for each emoji in the draft Google Calendar invite that I posted.

[Paul Elia]

I suspect that we have the power to override this problem on an individual basis by overriding CSS for trello.com style sheets. It's not perfect since everyone would have to do the same thing on their browser to get the same result, but we're already in that position at my company with a number of Power-Ups and Chrome extensions anyway. I am digging into Stylish now to see if I can get a result.

[Paul Elia]

Yes! This worked: https://jwopitz.wordpress.com/2015/04/08/trello-label-override-style-via-stylish/

[Paul Elia]

I'm sure that I could have written my own Stylish overrides and gotten good results, but I'll take this out of the box for now!

[Paul Elia]

I am happy to report that I have restored color to my emoticons / emojis in Trello list names and labels! 😊

The key was to install the Stylish chromium browser plugin and then to subscribe to the Trello overrides from https://jwopitz.wordpress.com/2015/04/08/trello-label-override-style-via-stylish/.

I wound up customizing it just a tad with the following CSS which I put into a separate style set:

---

/* Remove the bold font-weight in labels to restore color to Emoticons */
.list-card-labels .card-label {
font-weight: normal !important;
}

---

I also added a few more customizations to suit my preferences:

---

/* Increase the height of the horizontal scrollbar to make it easier to hit with a mouse. */
#board::-webkit-scrollbar, .u-fancy-scrollbar::-webkit-scrollbar {
height: 20px;
width: 4px;
}

/* Hide the footer; it takes up space without adding value. */
#footer {
display: none;
}

---

I hope this helps someone else!

[Paul Elia]

One more post to show that all is well again with this Stylish override of Trello CSS. The downside of course is that this has to be done on every team member's browser as well -- it can't be centralized by going about it this way. Hopefully someone from the Atlassian Trello team will pick up on the importance of this fix and we can go back to having emoticons in list names and label names out of the box!

[Lori]

I really appreciate your help and posts, Paul. I'm not thrilled at the idea of losing the bold from my list titles. I installed the Stylish Chrome extension and applied the override from your link, and nothing changed. I believe that's because I would have to use the CSS code you provided to change list titles and card labels to be non-bold. However, I have no expertise in CSS and trying to create a new style in Stylish I am clearly out of my league. I don't know how to limit the change to just my Trello boards, for example.

I think the Trello team needs to give us the option for non-bold titles. It doesn't look like the Google Chrome team is going to move on this any time soon. 

[Paul Elia]

Agreed. I would rather not be using Stylish either.

[Paul Elia]

I am happy to report that the latest version of Chrome has fixed this problem. I have disabled these hacks and all is well again! 🎉

[DollarAkshay]

Yeah, I hate this new greyscale title. My emojis are all black and white

[Lori]

This was definitely a Google Chrome problem, as it was just fixed in the latest version of Google Chrome, Chrome 97! If your Chrome browser hasn't automatically updated to the new version yet, you can do it manually:

1. Click on the three-dot Chrome menu button on the far right at top of the Chrome screen

2. Select Help > About Google Chrome

3. You'll see whether your Chrome is up to date or whether a new version is available. The new version is 97.0.4692.71.

4. Once I updated, I didn't have to reboot Chrome for the change to take effect. All the color in my Trello emojis was restored.

[Paul Elia]

Yes! Very nice!

[Gus]

Same problem, please anyone fix this issue!

[Lori]

Same problem with all my Trello emojis suddenly turning grayscale, around the same time as the original post. It's really ugly. I use Windows emoji picker (Windows-period) and Google Chrome. I just tested adding an emoji in Google Calendar and it got added in color, so I'm not having the same problem as Paul Elia in this chain.

[Paul Elia]

My problem in Google Calendar was due to the font in question being all boldface. As soon as I changed that it all worked with color emojis.