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 note that not every browser supports these symbols to the same extent, which means that this article might not be properly readable in some cases.
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
N becomes 🇳 and
L becomes 🇱. Simply printing these
two characters in sequence will display the flag, as expected: 🇳🇱.
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
O, i.e. 🇫 and 🇴, which are encoded as
🇴 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 two halves of a RIS code can be wrapped in
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 order to generate the RIS-codex, I have developed the Python package “RISify”, with which country codes can be converted to RIS-codes and vice versa. RISify is available on PyPI and can be installed using pip:
pip install RISify
After installation, it can be used as follows:
from ris import ris # decode a country code to RIS pt = ris("PT") print(pt) # 🇵🇹 # decode an HTML code to RIS de = ris("🇩🇪") de = de.encode("unicode") # default print(de) # 🇩🇪 # encode a RIS code to uppercase ASCII nl = ris("🇳🇱") nl = nl.encode("ascii") nl = nl.upper() # default print(nl) # NL # encode a RIS code to lowercase ASCII eu = ris("🇪🇺") eu = eu.encode("ascii") eu = eu.lower() print(eu) # eu # encode a RIS code to HTML fo = ris("🇫🇴") fo = fo.encode("html") print(fo) # 🇫🇴 # concatenate RIS codes into a string print("spam " + pt + " bacon " + de + " sausage " + nl + " eggs " + eu + " ham " + fo) # spam 🇵🇹 bacon 🇩🇪 sausage NL eggs eu ham 🇫🇴
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.