I was working on a multilingual website and faced weird things about translating flag emojis in chrome that I want to share with you in this short post
Update 2 (2022-03-20): Since chrome 99+ this issue has been fixed and even the example below shows the right one
Update 1 (2022-01-26): I have reported this issue to the chrome team, and they are working on it for all RTL languages
The problem: When I put some flags of countries alongside Arabic words the flag emoji is translated incorrectly on chrome, here is the reason and how I get around it.
I made a switch for the language between Arabic and English, and the English variant worked as expected, but when I put “العربية 🇪🇬” this is getting translated incorrectly as you might notice now if you are browsing from chrome browser on desktop, for people who cannot see the problem, the flag beside the Arabic word is supposed to be the Egyptian Flag (🇪🇬) but the problem is that it shows the Georgian flag (🇬🇪).
I thought it is a bug for the Egyptian flag 🇪🇬 at the beginning but I tried other flags
The same case for the UAE flag 🇦🇪 translated to the Spanish flag 🇪🇸, which makes it weird for me and started making some research
The Investigation: I found that chrome is switching the direction of the emoji Unicode based on the text nearby it for some reason, even if that is not explicit in the DevTools 🤔
and pick the new emoji or the nearest one to the new Unicode check the Unicode from here 🔗
I noticed that the Unicode for the Egyptian flag is U+1F1EA U+1F1EC 🔗 because we have an Arabic word with it in the same element “العربية” it is translated to the Georgian flag which is U+1F1EC U+1F1EA 🔗 and that explains it by switching the codes 🧐
The solution is so simple, just isolate that emoji from any text nearby it by wrapping it within a span or a div, and it works 🎉
<span>🇪🇬</span> العربيةIt is that simple but it is annoying at the same time, I tested other browsers and they are working fine without that workaround 🤝
I hope if you were facing the same problem to find this solution helpful, and hope if chrome can fix it in the upcoming versions
Note: this issue was visible on Chrome (Version 95.0.4638.69) for desktop on Mac OS (Big Sur v 11.6.1)
Tot ziens 👋