2

I'm experiencing an odd rendering problem in SOME versions of Chrome when trying to render the unicode characters U+2795 thru U+2797, the Heavy Plus/Minus/Division Signs. On some versions of Chrome, the sign will render as an ugly gray with some kind of black pseudo-outline, which does not respond to CSS color commands. Here is an image:

Ugly Plus Sign

For a sample of how it looks on every other browser I've tried, see FileFormat.info - Unicode Character HEAVY PLUS SIGN

By SOME versions, I mean, I can't seem to narrow it down to a particular version of Chrome. The same version of Chrome on two different computers running Win10 will render differently, and I can't find where the difference is.

Is this a bug in Chrome? I can't seem to find where anyone else has run into this problem. I'm trying to include this on a website, but if certain versions of Chrome render it ugly, I need to find another solution.

-- edit --

XY Problem

My purpose is to use the +/- as the "expand/collapse" markers in a collapsible accordion box where the background may be light-colored or dark-colored. I was hoping to be able to color them to match the remainder of the text without needing to resort to images, but based on the comments below I'm starting to think it may be easier to throw together an .svg, recolor it in CSS, and be done with it.

user2100826
  • 335
  • 2
  • 3
  • 13
  • Does Chrome show something different in the "Rendered Fonts" section, under the "Computed" tab? – Josh Lee Jan 29 '18 at 16:43
  • Mac OS does not ship with black-and-white versions of these glyphs. This will not be doable without web fonts or SVG. – Josh Lee Jan 29 '18 at 16:45
  • Possible duplicate of [Color for Unicode Emoji](https://stackoverflow.com/questions/32413731/color-for-unicode-emoji) – Josh Lee Jan 29 '18 at 16:48
  • Thanks Josh, at my first attempt it looks like it's responding to text-shadow and color: transparent from that post. I'm gonna make sure it doesn't break anything else and then I'll accept that if you want to make it into an answer. – user2100826 Jan 29 '18 at 17:01
  • Actually, this post is what I'm looking for: [How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?](https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip). Thanks for getting me started in the right direction. – user2100826 Jan 29 '18 at 18:50
  • Be careful with the solution provided in [How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?](https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip), however. The text-style variation selector U+FE0E is not a general purpose tool. Only the sequences explicitly defined in the Unicode standard are valid, and there are none for ➕, ➖, and ➗. If your browser renders those symbols differently when succeeded by `︎`, it’s doing it wrong. – CharlotteBuff Jan 29 '18 at 21:10
  • I noticed in the remarks that it's not considered a guarantee. Is there a way to tell the browser not to render these characters as an emoji? – user2100826 Jan 29 '18 at 22:35
  • Specifying a different font that contains glyphs for these characters. FileFormat lists some, but since none of them are included by default on most systems, you will need to resort to providing a web font along with the page. Even then, however, there is no 100% guarantee that all web browsers will show a monochrome glyph. Especially mobile devices can be very stubborn when it comes to overriding their default emoji fonts. – CharlotteBuff Jan 30 '18 at 16:25

1 Answers1

1

The problem is that the browser is replacing the glyphs with emoji, which will be rendered differently for each browser. Emoji cannot be colored using CSS -- the best you can do is silhouette them and color the silhouette, as described in Color for Unicode Emoji. Unfortunately, this still means that the glyphs will appear differently on different browsers, as the emoji won't render using the font you specify.

There isn't currently a way to force browsers to render glyphs instead of emoji. Appending \FE0E (as described in How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?) will sometimes work, but this is not consistent, not guaranteed, and therefore not recommended.

You can provide a web font which contain the glyphs you need, but this is also not guaranteed to work, as some browsers (especially on mobile devices) will still replace them with emoji.

If you require consistent rendering, the best way seems to be to use an image instead of trying to force the browser not to use an emoji.

user2100826
  • 335
  • 2
  • 3
  • 13