Question marks instead of medals

[rioj7]

On Google Chrome I see question marks in the medal display.

In the example image there are medal images for the Gold, Silver, Bronze Podium Places.

The font used is "Source Code Pro", but my local font does not have these Unicode characters.

[jeroenheijmans]

Thanks for the feedback! I can imagine how this bug would happen.

The extension relies on the font-family of the AoC website itself for consistency, and it is:

font-family: "Source Code Pro", monospace;

The Source Code Pro font does not contain the three medal unicode characters. On my system the monospace font in Firefox defaults to Courier New or in Chrome to Consolas which both do have those glyphs.

@rioj7 What OS are you on? Could you check in Chrome's settings what the monospace font is that Chrome uses? And if you have time, it would be perfect if you also could check if you do have some monospace font that does have the "🥇🥈🥉" (medal) characters. Then I could tweak my plugins' font-family for the medal html elements and insert your font.

Note to self, if really needed, the unicode-range css property may come in handy.

[jeroenheijmans]

Perhaps Courier New is a decent fallback font after monospace (which defaults to a distro-specific font, I presume?)?

[jeroenheijmans]

Asked a few colleagues with other OSes but so far not reproducible. I cannot reproduce it on my machine either, not even if I force the element via its style.fontFamily at only Source Code Pro: Chrome on Windows still manages to dig up the medal glyphs somewhere.

Really need a reliable way to reproduce this, or at least some help in testing a potential solution. If anyone cares to chip in, I think opening the dev tools and editing the font-family for medal elements to "Source Code Pro", monospace, "Courier New" or similar 3rd font should get this fixed. If I'd know that it does, it makes sense to change it.

[rioj7]

@jeroenheijmans I use Windows 8.1 and Google Chrome. Something strange, in your first comment you have the 3 medal Unicode characters, 3 days ago they showed as rectangles, now I see medal glyphs. Used devtools and they now show as png images.

I have made a pull request to replace the unicode chars with SVG images (stored in the extension).

With Photoshop I tried every font on my machine but none has the medal glyphs.

In CSS any font named after monospace is ignored because every browser must have a definition for monospace, serif and sans-serif.

[jeroenheijmans]

Thanks for the PR at #61, much appreciated.

First up, a question: what is the source of the SVG's, and what is the license and copyright status? Are we allowed to add it into this repository under the current license?

I have a few reservations about the setup as well, that'll require me to think a sec or two about merging it:

• It's a pretty big change, with a bunch of code added, just to tweak a small feature. The added complexity comes with risk of breaking other things, while I have no clue yet of how many people are affected. I also don't know how many browser/OS combinations would actually break with using SVGs in browser extensions like this.
• Related, I'm no expert at all with extensions and manifests, but do recall that including files and setting proper permissions was a major pain to get right just for the JS alone. I'd happily take this specific risk in november of a year, before AoC starts, but perhaps not halfway through December when the plugin is otherwise running stable. - Related, there's a manifest v2/v3 change going on, and Chrome/Firefox are out of sync here at the moment too.

I'd still hope that if we'd know the root cause (e.g. what the precise font situation is on a machine with this issue), a simpler solution would be apparent. You might be right that monospace must be available in either case, but I think that if a specific glyph is missing then it would still fall back beyond that font in the family? I'd prefer to try that kind of option first, it's a shame though that your OS is Windows 8.1 since I don't have access to such a machine at the moment.

In any case, I do want to thank you for taking the time and submitting a potential solution. But for now I'd like to think about it some more. Hope you'll understand!

[rioj7]

@jeroenheijmans I found these SVG's on the Wikimedia site, they have taken them from the github site for the Emojione font, not available anymore on the link provided, so the license/copyright is not at Wikimedia. For other SVG's change the unicode point number on the url. (I added the color name because unicode points are hard to read.)

I have changed the SVG's a bit to match your background colors (gold and silver) and added a dark border around the medal for additional contrast.

I just found that istockphoto used these same SVG's, made an image of them and now sells this image for Eur 9.

My Google Chrome uses Consolas for Fixed width font and Arial for Sans-Serif font.

Every browser is supposed to render SVG, almost all Wikipedia images are SVG. At least the simple SVG paths with fill and stroke. AOC still supports IE9 but who uses that still.

The "web_accessible_resources" in the patch is the v3 to limit the probe scanning of extension installs, but I can make it v2 compliant, remove the matches property and just use a list of globs.

As a sidenote, I seem to have the Christmas tree used in Showing all participants but I don't have the glyph used with Showing only medalists but that is probably one of the medal characters. That uses font-family: Helvetica, Arial, sans-serif;. The Christmas tree is multi color, so it is not taken from the Arial font. If I change it to font-family: serif; the text changes but the Christmas tree stays the same. The browser must have some Emoji font that it uses for these glyphs.

[jeroenheijmans]

Ok cheers thanks for giving the source, the CC license they use should be good enough since we'd share our remixed versions.

I'll still opt to hold this PR off until next year's event (and possibly also further investigate fallback font options). You make fair points that it should just work with the SVG's, but I'm super risk averse in December with work and puzzles and the AoC survey and whatnot, just don't want to be stuck with a broken plugin.

Thanks again for contributing, and hope you'll understand my reasoning.

[rioj7]

@jeroenheijmans Using something graphical makes it hard to write unit tests for.

I will keep using my unpacked development version. If anybody has the same problem as I had they can use the branch in my fork and also use an unpacked extension.

According to emojipedia.org the medals are part of Unicode since 2016. If you click on the Microsoft version you see that it started supporting it on Windows 10 Anniversary Update.

The Christmas Tree is part of Unicode since 2010. And is Black-And-White in Windows 8 but color in Windows 8.1

Looking at the Emoji-Frequency Windows 8.1 is missing a lot of Emoji support.

Emojipedia doesn't mention Linux as an Emoji supporter.

Currently in our leader board a player has 10 medals of one kind and the SVG version has a slight placement problem. I will investigate and update.

[rioj7]

@jeroenheijmans The medal table total columns have a span tag (with the medal character) that has a display style of inline. If you set it to display:block (like in the rest of the medal table) the span will fill the whole td tag and not only the width of the medal character.

By limiting the SVG to 16x16 pixels it behaves as a normal character and will not resize the td tag.

[jeroenheijmans]

Once more, thanks for your interaction and suggestions! I spent a lot of time on the survey recently, and will have to pause tweaking the browser extension a bit. I'll try to revisit this and all other suggestions roughly November 2022, before the next edition. Hope you'll understand!

[jeroenheijmans]

Thanks once more for the issue report, and the extensive interaction!

I finally made some time to look into this. I will accept the PR (the merge commits will come during 2023 I promise, working on a feature branch locally), but I will also give my own spin to it. Because it is such an extreme edge case (possibly limited to Windows 8 and lower) I don't think it's worth introducing SVG's and extra moving parts and assets. Instead I found that the AoC site uses a very limited font stack ("Source Code Pro", monospace) and I truly hope that if I extend that with several fallbacks for the medal html part, that even Windows 8.1 and other edge cases will be able to find medal emoji. Otherwise the background color will just have to do, I'm afraid.

Either way, thx, and happy puzzling!