29:null 2a:["$","title",null,{"children":"Which unicode flags are reversible? | Job van der Zwan | Observable"}] 2f:T58c,md`## Background Today I learned something about unicode flags: > *Country flags are part of the Unicode standard, but for some reason are not implemented on Windows. If you are reading this in a browser from Windows—I am sorry!* > > *Flags don’t have dedicated codepoints. Instead, they are two-letter ligatures.* > > 🇺 + 🇳 = 🇺🇳 > > 🇷 + 🇺 = 🇷🇺 > > 🇮 + 🇸 = 🇮🇸 > > 🇿 + 🇦 = 🇿🇦 > > 🇯 + 🇵 = 🇯🇵 > > > *They don’t use real letters, though. Instead, the “regional indicator symbol letter” alphabet is used (U+1F1E6..1F1FF). These letters are not used for anything but composing flags.* > > *What happens if you put together two random letters? Not much:* 🇽🇾 *(except that text editing starts to behave strange).* > > *If you want to experiment, feel free to copy and combine from this alphabet:* 🇦 🇧 🇨 🇩 🇪 🇫 🇬 🇭 🇮 🇯 🇰 🇱 🇲 🇳 🇴 🇵 🇶 🇷 🇸 🇹 🇺 🇻 🇼 🇽 🇾 🇿. *There are 258 valid two-letter combinations. Can you find them all?* > > *A funny side-effect of being two-letter ligature:* \`''.join(reversed('🇺🇦')) => '🇦🇺'\` — [*Emoji under the hood*](https://tonsky.me/blog/emoji/#flags) on [\`tonski.me\`](https://tonsky.me) Challenge accepted! Let's see if we can find all valid flags, and then for good measure also the find subset that can be reversed.`30:T926,flags = "🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇻 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇳 🇨🇴 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇪 🇩🇬 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇦 🇪🇨 🇪🇪 🇪🇬 🇪🇭 🇪🇷 🇪🇸 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇫🇷 🇬🇦 🇬🇧 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇲 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇮🇹 🇯🇪 🇯🇲 🇯🇴 🇯🇵 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇷 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇫 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴 🇳🇵 🇳🇷 🇳🇺 🇳🇿 🇴🇲 🇵🇦 🇵🇪 🇵🇫 🇵🇬 🇵🇭 🇵🇰 🇵🇱 🇵🇲 🇵🇳 🇵🇷 🇵🇸 🇵🇹 🇵🇼 🇵🇾 🇶🇦 🇷🇪 🇷🇴 🇷🇸 🇷🇺 🇷🇼 🇸🇦 🇸🇧 🇸🇨 🇸🇩 🇸🇪 🇸🇬 🇸🇭 🇸🇮 🇸🇯 🇸🇰 🇸🇱 🇸🇲 🇸🇳 🇸🇴 🇸🇷 🇸🇸 🇸🇹 🇸🇻 🇸🇽 🇸🇾 🇸🇿 🇹🇦 🇹🇨 🇹🇩 🇹🇫 🇹🇬 🇹🇭 🇹🇯 🇹🇰 🇹🇱 🇹🇲 🇹🇳 🇹🇴 🇹🇷 🇹🇹 🇹🇻 🇹🇼 🇹🇿 🇺🇦 🇺🇬 🇺🇲 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇦 🇻🇨 🇻🇪 🇻🇬 🇻🇮 🇻🇳 🇻🇺 🇼🇫 🇼🇸 🇽🇰 🇾🇪 🇾🇹 🇿🇦 🇿🇲 🇿🇼".split(' ')31:[] 2d:{"id":"cd277609732dcd38","slug":"which-unicode-flags-are-reversible","title":"Which unicode flags are reversible?","thumbnail":"dc2a26fd6139f53a5eccb9cf3b4b0cb3c48fe64fcaaf6b14a294a458ca4d9086","access_level":"public","create_time":"$D2021-03-26T08:59:48.870Z","update_time":"$D2021-04-14T10:21:52.668Z","view_time":null,"first_public_time":"$D2021-03-26T10:23:30.049Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":325,"publish_version":325,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[{"id":"c93f67de4666a668","reply_to_id":null,"content":"I love that this fits into a two-dimensional table like this.","create_time":"$D2022-03-03T22:40:57.100Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"2b7f6c0d95772a00","reply_to_id":"c93f67de4666a668","content":"Darshan","create_time":"$D2023-01-19T06:06:54.324Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"467914f6935a9340","login":"dp6309216","name":"Darshan P","avatar_url":"https://avatars-next.observableusercontent.com/95347916fcfc0a23112a778d52a8775650c033a0749d237b629299b63cca2c89","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Which unicode flags are reversible?","cells":[{"id":173,"value":"md`# Which unicode flags are reversible?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof flagSearch = Text({placeholder: \"paste a flag emoji here!\", value: \"🇿🇦\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"{\n const result = pairs.get(flagSearch);\n switch(result){\n case undefined:\n return md`Please paste a flag emoji into the text field`;\n case '':\n return md`${flagSearch} cannot be reversed 😞

${flagSearch} ⮀ ${flagSearch[2]+flagSearch[3]+flagSearch[0]+flagSearch[1]}`;\n default:\n return md`${flagSearch} can be reversed! 😊

${flagSearch} ⮀ ${result}`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// regional indicator symbol letters\nrisl = \"🇦 🇧 🇨 🇩 🇪 🇫 🇬 🇭 🇮 🇯 🇰 🇱 🇲 🇳 🇴 🇵 🇶 🇷 🇸 🇹 🇺 🇻 🇼 🇽 🇾 🇿\".split(\" \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import {Table, Text} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"tableData1 = {\n const data = [];\n for (const rowLetter of risl) {\n const row = { \"‧\": rowLetter };\n for (const columnLetter of risl) {\n row[columnLetter] = rowLetter + columnLetter;\n }\n data.push(row);\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"Table(tableData1, { rows: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`Well, that gives us an overview of all combinations, and we can *visually* inspect which combinations render as flags. However, this doesn't let us detect which combinations are valid flags *from inside JavaScript*, let alone figure out which ones map to another valid flag if reversed. Now, I could try some messed up hack, like rendering the flags to canvas and detecting if certain pixels were drawn over in case of invalid combinations, but that wouldn't work across all platforms.\n\nSo instead I'll just resort to using [a complete list of valid flags](https://en.wikipedia.org/wiki/Regional_indicator_symbol) as input and work from that set:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"tableData2 = {\n const data = [];\n for (const rowLetter of risl) {\n const row = { \"‧\": rowLetter };\n for (const columnLetter of risl) {\n const combo = rowLetter + columnLetter;\n row[columnLetter] = flags.includes(combo) ? combo : \"\";\n }\n data.push(row);\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// Thanks to Jacob Rus fo the style suggestions\nfunction flagTable(data) {\n var t = Table(data, { rows: 40, width: 740 });\n t.querySelectorAll('td, th').forEach(cell => {\n cell.style.fontSize = '1.4em';\n cell.style.padding = '0 0';\n cell.style.border = 'none';\n });\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"flagTable(tableData2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`Note that depending on the system that you are viewing this notebook on, some flags from the first table might be missing in the second. If so, this is due to a number of letter combinations having been deprecated and replaced with new ones (they are listed in [the wikipedia article](https://en.wikipedia.org/wiki/Regional_indicator_symbol) linked earlier). The deprecated flags were not included in the flag list here.\n\nNow let's filter out all flags that cannot be reversed:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"tableData3 = {\n const data = [];\n for (const rowLetter of risl) {\n const row = { \"‧\": rowLetter };\n for (const columnLetter of risl) {\n const combo = rowLetter + columnLetter;\n const obmoc = columnLetter + rowLetter;\n row[columnLetter] =\n flags.includes(combo) && flags.includes(obmoc) ? combo : \"\";\n }\n data.push(row);\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"flagTable(tableData3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`Ok, cool! But what if I want to check what the counterpart of a reversible flag is? Easy! We just make a map of all flags to their counterparts. If the reversed regional indicator symbols don't result in a flag we'll add an empty string instead:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"pairs = {\n const data = new Map();\n for (const flag of flags) {\n const reversed = flag[2] + flag[3] + flag[0] + flag[1];\n data.set(flag, flags.includes(reversed) ? reversed : \"\");\n }\n return data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof flagSearch2 = Text({placeholder: \"paste a flag emoji here!\", value: \"🇦🇶\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"{\n const result = pairs.get(flagSearch2);\n switch(result){\n case undefined:\n return md`Please paste a flag emoji into the text field`;\n case '':\n return md`${flagSearch2} cannot be reversed 😞

${flagSearch2} ⮀ ${flagSearch2[2]+flagSearch2[3]+flagSearch2[0]+flagSearch2[1]}`;\n default:\n return md`${flagSearch2} can be reversed! 😊

${flagSearch2} ⮀ ${result}`\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`(In case you're curious, there are 105 flags that can be reversed, including those that reverse to themselves)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"