Regional Indicator Symbols

In this article, I’ll dive into the technical aspects of RIS-encoding: a popular category within the Emoji character set that allow country flags to be displayed. Please not that not every browers supports these symbols to the same extent, which means that this article might not be properly readable in some cases.

Introduction

The RIS is a collection of characters encodings in the UTF-16 specification that make it possible to display country flags in a body of text. Every flag is a pairing of two symbols, each of which representing an alphabetic letter. When such a symbol matches a country code from the ISO 3166-1 alpha-2¹ specification, the flag of said country will be displayed. The table in Appendix A provides an overview of all possible combinations – and as such all possible country flags: the RIS Codex.

RIS codes & ISO 3166

The compilation of the RIS Codex in Apprendix A is automized; all RIS-characters are paired, and, if applicable, the name of the country in question is looked up (as displayed when hovering the RIS with the cursor). This also shows that the ISO 3166 specification is not always implemented correctly, and is subject to change: a subset of pairings has a known name, but is not displayed as a country flag. This concerns:

• “Pseudo-Accents” (XA);
• “Pseudo-Bidi” (XB);
• “Outlying Oceania” (QO);
• “Eurozone” (EZ); and,
• “Unknown Region” (ZZ).

Encoding a Country Flag: An Example

In order to display the national flag of The Netherlands, the Dutch country code needs to be looked up in the ISO 3166 definition. Using the search tool provided by the ISO,² this code is found to be NL.³ In order to display the flag, this code is encoded to RIS-characters; N becomes 🇳 and L becomes 🇱. Simply printing these two characters in sequence will display the flag, as expected: 🇳🇱.

Browser Support

Coding a country flag in HTML can be done in two ways. It’s possible to place the UTF-16 symbols directly into the document, and it’s possible to encode the characters using HTML-symbols, e.g. the Faroese flag can be compiled from the RIS-encodings for F and O, i.e. 🇫 and 🇴, which are encoded as 🇫 and 🇴 in HTML to get to the actual country flag 🇫🇴.

There are some interesting differences between the way RIS codes are handled by different browsers. E.g., the individual halves of a RIS code can be wrapped in HTML elements like this: <span>&#127477;</span><span>&#127481;</span>. On Firefox and most Chromium-based browsers, the country flag is displayed as it usually would. However, Apple Safari browser will display both RIS codes individually. When a margin is added between these elements using CSS, Firefox will display the RIS codes separately, similar to Safari, while Chromium-based browsers will simply add the margin to the country flag as a whole.

In the following example, the two RIS codes 🇪 and 🇺 are placed next to each other, both wrapped in span elements. Together they form the flag for the European Union: 🇪🇺. Using a CSS animation, the margin between these elements is increased and then decreased until zero. After a short periode of time, this procedure is repeated. Depending on the browser in which this example is viewed, one of three things can be seen:

1. Firefox will show a flag which is then is split up into two RIS codes that merge back together into the flag once the margin is zero;
2. Chromium-based browsers will display a flag that will be slightly offset while the margin increases; and,
3. Safari will display two separate RIS codes, of which the distance in between will grow and shrink, but they never combine into a country flag.

Conclusion

RIS codes combine many standards and conventions that are volatile to some degree, especially when it comes to implementation. On top of that, browsers are notorious for having ever so slightly different implementations of such standards. Making use of RIS codes on the web has a high chance of resulting in unintentionally providing a different experience to different users. Still, RIS codes can be used as a fallback for icons (to cover for cases where a stylesheet is not loaded) or in other parts of the GUI, such as titles and tooltips.