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-21 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,2 this code is found to be
NL
.3 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>🇵</span><span>🇹</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:
- 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;
- Chromium-based browsers will display a flag that will be slightly offset while the margin increases; and,
- 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.
-
ISO 3166: Country Codes. ISO. ↩
-
Online Browsing Platform. ISO. ↩
-
NL - Netherlands (the). ISO. ↩