Inconsistent Flag Designs

[Foggalong]

Playing around I noticed the flag design wasn't consistent, with shiny and flat GoSquared designs both present. Looking at the git history this looks like an issue inherited from the original. I've put together three different solutions in separate branches linked below, happy to make a PR for whichever yous prefer 🙂

png-flags

The first just updates all PNG graphics to use the latest versions of GoSquared's shiny variants (judging by the translation docs this is the version they're all supposed to use). This means a small increase in size for each file since the shiny variants are slightly heavier, with the exception of China which is a decrease of several kilobytes (no idea where that icon was from).

It did occur to me while doing this though that this repo depends on gosquared/flags, a stagnant project with no updates in 6 years and no original art files to work from. If a country every changed its flag or there was ever a need for one not in its repository then there'd be problems. That lead to the second solution;

svg-flag

This solution changes the design base to catamphetamine/country-flag-icons, which like GoSquared Flags is also MIT licensed.

Since it uses vectors though, we're not limited to using what's provided; we can make sure designs are specifically tailored for the size at which they're displayed. I've modified Nikolay's 3:2 originals to be 4:3 (closer to the old design), 16-by-12 pixel icons which are as aligned to the pixel grid as possible. This means for almost* every image the quality is either the same or improved.

As part of incorporating this in CSS, by increasing the language button size from 24px to 32px we can scale up the same 16px image we use in the dropdown without any degradation in quality. That, together with SVG optimization, means the collective filesize has dropped by almost 40% (26KB to 16KB). It also means we don't have to worry about icons blurring on HD/zoomed displays and the size drop (alongside vectors generally being better for modern web) means using SVG has taken the loadtime from ~135-140ms to ~5ms on average per flag.

Before	After

* The obvious standout which has suffered is Greece, but generally consider these designs first drafts. If this is the solution folks want I'll review the colours so that it's not as jarring (as is I think it's just using the official flag hexes) and will happily make tweaks if there's something folks want changing.

emoji-flag

I found it odd when searching for another design base that there seemed to be a big gap in the market for an open-source, high quality, small size, vector-based flag library. It dawned on me today that a possible reason is flag emoji like 🇬🇧 and 🇸🇰 exist: they're a universal standard, take the onus off ux people to create tiny, good looking flags, and move any image loading overhead from the website to the font renderer.

I mocked up a quick third solution just to see whether this would be possible and it actually works pretty well. The three snags:

1. The menu gets a little funky in RTL languages, with Liquid seemingly not sure where to put the emoji. This could possibly be addressed with some CSS tweaks.

2. There's essentially zero support for the Catalonia emoji which would mean we'd have to use an alternative (the fallback seems to be 🏴) or else some clever CSS to put an image there (but then insert inconsistency).

3. I thought I'd misread when I first saw it, but Microsoft doesn't support flag emojis. Apparently they don't want to get "involved in the politics of flags" which seems batshit to me, but hey-ho. Instead they just display the country code as text. This wouldn't break the UI per-say, but would mean it looked worse to everyone accessing the site through Chrome or Edge on Windows which is less than ideal.

The upside is that when it does work, it looks pretty damn sweet (and Twemoji's colours are probably what I'd borrow to finish off the vector versions if you choose that option). The Microsoft issue could be worked around by bringing in an emoji font like Twemoji which supports flags, up to you if you think that's something you'd like me to look into.

Misc

All three of these updates also:

• Update the docs to be markdownlint compliant (just fixing headers and code blocks)
• Tweak the CSS to fix the vertical alignment of the flag on the language button.

I'd also say, sorry if it's overwhelming that I've done all this for such a small issue! It's mostly been an exercise distracting myself over a difficult weekend and getting to know how Jekyll works. I'll absolutely not be offended no matter which you pick, it's just been a fun problem to look into 😊

[tupaschoal]

I'd also say, sorry if it's overwhelming that I've done all this for such a small issue! It's mostly been an exercise distracting myself over a difficult weekend and getting to know how Jekyll works. I'll absolutely not be offended no matter which you pick, it's just been a fun problem to look into 😊

Don't be, this was an amazing read and I love investigate work like this. Now to the matter at hand.

I suffered when reviving the project to find the "Original flags" and I'm probably to blame for some of the inconsistencies. From the three options you picked, I think we should go with svg-flags, because it is a maintained repository, compared to the gosquared one, but also because it won't need as many workarounds as it seems like emoji-flag would need.