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.

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 two halves of a RIS code can be wrapped in HTML elements: <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.

RISify

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 🇫🇴

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.