Join the discussion
Write your take first — we'll ask for email only when you're ready to publish.
- Hacker News
- The exception list includes South Africa with a comment that it can’t be rendered with just rectangles, but I don’t think that’s correct. Layering and rotation should be able to reproduce the effect. South Korea’s Taegeukgi can be created with circles, crescents and rectangles, though it would take a little more work.by jonhohle
- Fun fact: Constitution of Nepal has chapter about format of The Flag and it reads as geometry textbook problem (starred one, for advanced students).by blacklion
- If you're on Windows (where Microsoft famously chose they would not get involved with flags and show country codes instead), execute this in dev tools or save it as a javascript bookmarklet to make the emoji flags show up:
javascript:(function(){if(!document.getElementById('twemoji-styles')){const s=document.createElement('style');s.id='twemoji-styles';s.textContent='img.emoji{height:1em!important;width:1em!important;margin:0 .05em 0 .1em!important;vertical-align:-0.1em!important;display:inline!important;}';document.head.appendChild(s)}const r=()=>{const o={folder:'svg',ext:'.svg'};twemoji.parse(document.body,o);if(!window.__twemojiObserver){let t;const ob=new MutationObserver(()=>{clearTimeout(t);t=setTimeout(()=>{ob.disconnect();twemoji.parse(document.body,o);ob.observe(document.body,{childList:true,subtree:true});},300);});ob.observe(document.body,{childList:true,subtree:true});window.__twemojiObserver=ob;}};if(window.twemoji){r();}else{const sc=document.createElement('script');sc.src='https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js';sc.crossOrigin='anonymous';sc.onload=r;document.head.appendChild(sc);}})();by ComputerGuru - Thanks, that fixes it in Chrome for me. Firefox was already displaying the flags correctly from the beginning.by Titan2189
- Or you can just switch to Firefox.by Kwpolska
- Nobody? Okay then: "Fun with flags!". There, I said it.
- Fun exercise to make something look like something we know, but actually isn’t. I love that kind of compression.
I think your article should use your own flags instead of the Unicode ones where possible :)
The globally distributed lookup table for Unicode flags takes 64 bits per search. You could point out that this is a tremendous waste of data for some flags :)
by Stitch4223 - Spoiler: after all this work only 128 flags were encoded to some degree, 67 left out. Dunno that I’d call an encoding scheme that can only represent 66% of its target set (and even so, with self admitted limitations) successful in any way.
- Yes and what is or isn't preserved is pretty arbitrary too.by account42
- There are exactly 64 flags excluded for having custom glyphs/seals/symbols/icons, which is crying out for an “appendix” lookup table to complete the encoding. The positions look very regular too, you could probably fit the positioning in the remaining 2 bits of a u8.by fwlr
- Surprised this didn’t mention heraldry, which has what’s basically a DSL for coats-of-arms:by pimlottc
- This reminds me of a great series on YouTube called "Can You Draw Every Flag in Powerpoint?"[1] and the guy does his darnedest to do it precisely, and in the process you learn just how specific (and sometimes non-specific) flags are!
[1] Part 1: https://www.youtube.com/watch?v=w5QSVhgrqVE
by blixt - Loved the title. I was like "that's 10 bits too many for a flag!" Hahaby mabster
- Slightly reminds me of how we used to use TINYINT in MySQL to store boolean flags (which can store a range from -128 to 127 or 0-255 if unsigned).
I'm the kind of nerd who secretly wished to store many such bools in one integer and use the bitwise operators to query them, but restrained myself from ever doing this, since if I managed to sneak that through code review, the number of curses of my name would no doubt become so large (and so loud) over time that it would affect my employability.
by xp84 - A jack is a flag flown from a jackstaff, wot is found at the back of a ship or boat.
The UK flag is called the Union Flag (it's a flag and it is a union of various flags and possibly nations too!) but let's face it, given how many people think its called the Union Jack, it doesn't really matter.
If your flag pole at home is somewhat canted then I think you can call it a jackstaff, with a similar justification to the Royal Navy managing to designate their shore bases as ships. For example just up the road is HMS Heron (His Majesty's Ship: Heron).
The Union Flag/Jack is only the flag of the UK by convention and not law. It's a bit wooley, just like our Constitution but it still all works.
My point is that whilst I do enjoy this encoding scheme and it is jolly clever, reality is way more complicated. The UK's flag is pretty complicated but not alone. I'm pretty sure several flags have tassels, which I suppose strays into the coat of arms territory.
How hard do you want to squint!
by gerdesj - My Union Jack (in SVG) is coded to reflect the union of England, Scotland and Northern Ireland. I live in Scotland where it is commonly known that the English flag is plastered over the Scottish Saltire, and they don't even get the same colour blue in each.
There are different aspect ratios too, plus there is the 'jack'. I don't care for AI but I do like SVG to be human readable to some extent, although I do like oklch colours, which are not something I consider 'human readable'.
Here I have the Scottish flag, the English one, a 'GB' flag which slaps one on top of the other with those Irish extras, to make a UK 'Jack' that waves badly because SVG filters are not something I am good at.
Excuse the SVG code:
<defs id="flags"> <symbol id="england" fill="white" clip-path="url(#flag-clip-two-by-one)"> <title>England</title> <use href="#bounding-square"/> <g id="st-george-cross" stroke="oklch(0.5472 0.242 22.16)" stroke-width="12"> <g id="england-flag-cross" transform="translate(60 60)"> <line id="england-flag-line" x1="-60" x2="60"/> <use href="#england-flag-line" transform="rotate(90)"/> </g> </g> </symbol> <symbol id="gb" clip-path="url(#flag-clip-two-by-one)"> <title>United Kingdom</title> <use fill="oklch(0.2873 0.139 259.18)" href="#saltire"/> <g id="st-patrick-lhs" stroke-linecap="square"> <line id="st-patrick-red-line" x2="60" y1="32" y2="62" stroke="oklch(0.5472 0.242 22.16)" stroke-width="4"/> <use href="#st-patrick-red-line" transform="translate(0 124) scale(1 -1)"/> </g> <use href="#st-patrick-lhs" transform="translate(120 -4) scale(-1 1)"/> <use stroke="white" stroke-width="20" href="#england-flag-cross"/> <use href="#st-george-cross"/> </symbol> <symbol id="scotland"> <title>Scotland</title> <g fill="oklch(0.5079 0.1766 247.88)" clip-path="url(#flag-clip-two-by-one)"> <g id="saltire"> <use href="#bounding-square"/> <g transform="translate(60 60)"> <line id="saltire-white" x1="-60" x2="60" y1="-30" y2="30" stroke="white" stroke-width="12"/> <use href="#saltire-white" transform="scale(-1 1)"/> </g> </g> </g> </symbol> <symbol id="union-jack"> <title>Union Jack</title> <defs> <filter id="flag-wave"> <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="3" result="flag-wave-fractal-noise" seed="42"> <animate attributeName="baseFrequency" values="0.0025;0.01;0.002;0.005;0.004;0.0025" dur="12s" repeatCount="indefinite"/> </feTurbulence> <feDisplacementMap xChannelSelector="R" yChannelSelector="B" in="SourceGraphic" in2="flag-wave-fractal-noise" result="flag-wave-fractal-source" scale="50"/> <feGaussianBlur in="flag-wave-fractal-source" stdDeviation="0.4"/> <feMorphology operator="dilate" radius="0.5"/> </filter> <radialGradient id="radial-glow"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="grey"/> </radialGradient> <linearGradient id="flagpole-gradient"> <stop offset="0%" stop-color="grey"/> <stop offset="55%" stop-color="white"/> <stop offset="90%" stop-color="darkgrey"/> </linearGradient> </defs> <g transform="rotate(10)translate(25,10)"> <use href="#gb" transform="translate(7, -10)scale(0.75)" filter="url(#flag-wave)"/> <circle r="3.5" fill="url(#radial-glow)" stroke="none"/> <rect y="2.5" x="-2.5" width="5" height="120" stroke="none" fill="url(#flagpole-gradient)"/> </g> </symbol> </defs>by Theodores - I enjoyed that the Union Flag just gets its own 'preset' - the fact that it's still presiding over a large handful of others makes it a very efficient decision compared to trying to tease out all the necessary shapes to reconstruct it.
I'll admit, I was hoping for some geometric approximations for countries like Brazil, though.
by xp84 - In case anyone else was curious about using a lookup table: there are there are fewer than 256 recognized countries or territories [1], so 8 bits should be enough for a key.
This would be superior to the 11-bit encoding presented here because it handles complexities such as coats of arms. It would also handle bizarre situations such as two countries having almost identical flags [2].
[1] https://en.wikipedia.org/wiki/List_of_countries_and_territor...
[2] https://www.worldatlas.com/articles/country-flags-that-resem...
by kjgkjhfkjf - but then you have to have the svg built into decoder. will they be smaller than 5KB?
also then it's no different from a svg sprite
by opiotrek - you could also exploit the fact that some flags may appear more frequently than others and use huffman encoding or something to encode the commonly used flags in a shorter sequence than rarely-mentioned countries, and save some bits on averageby porphyra
- I can't believe that second article doesn't include images of the flags it is talking about. Not even the links provided for each country show the flag...by monk_grilla
- There are only 500K or so full length feature films so we should be able to encode them in about 18 bits or so. Who needs mp4 anyway!
- I’m surprised that the near-identical flags list omits Slovenia and Slovakia which both have white-blue-red horizontal stripes and a coat of arms (albeit with slightly different placement and different background colors on the coats of arms). A part of me feels like it’s part of a long-time joke the two countries are playing to confuse non-Slavs (the Slovenian word for their language is Slovenščina while the Slovak word for their language is Slovenčina and this is just the beginning of the confusion between the two countries/nationalities).by dhosek
- A spec-compliant Unicode renderer is expected to render 259 flags [1]. So 8 bits isn't quite enough. You would need 9.
Obviously an arbitrary bitmap of dimensions that could be used for a recognizable flag would need orders of magnitude more storage. The constraint that we are representing a finite set of flags is what admits such a compact representation.
[1] https://www.unicode.org/Public/emoji/latest/emoji-sequences....
by kjgkjhfkjf - I don't understand why this is the top comment. The article isn't about encoding a bag of unique items, it's about drawing the flag. So of course you can do it in 8 bits, because you're just storing the "id", not how to draw it.by NathanaelRea
- Maybe there's an allegory to the sciences. But I rather a model be suboptimal in encoding that can be used to generate hypothetical reasonable flags in its unpopulated states, than having an optimal encoding which doesn't answer questions or reveal possibilities in its unpopulated states. Like what does flag #0xFE look like in an 8-bit encoding? I really like the idea of driving compressed trees in reverse with random data to generate new fascinating (valid) sequences.
Also, for compressing into 8 bits - is this not like saying "I can compress all of Shakespeare's plays in 6 bits" because there are ~39 plays, but then the size of the "shakespearezip" is just the sum of the works?
by eventualcomp