3

I was working on importing content from some files when I encountered this issue. Some of the unicode characters are rendered wrong in Chrome & Safari (not issues in Firefox).

The symbol in question is: र्इ

Screenshots from each browser below:

Firefox Firefox

Chrome Chrome

Safari Safari

I've found other pages using the same character (via a simple Google search) having same issue. Some examples below:

What is causing this? Is it due to invalid characters, or a font issue on the page?

The issue is with only a few characters. Most of the content is rendered just fine in all browsers.

Zero Piraeus
  • 56,143
  • 27
  • 150
  • 160
TheKalpit
  • 1,426
  • 1
  • 14
  • 26

1 Answers1

2

The Devanagari glyph र्इ is a ligature, made up of three Unicode characters:

  1. र (U+0930) Devanagari Letter Ra
  2. ् (U+094D) Devanagari Sign Virama
  3. इ (U+0907) Devanagari Letter I

The second of these, Virama, is a diacritic used to indicate that the vowel sound which is normally part of the pronunciation of the letter to which it is attached should be suppressed in speech. When र is combined with this diacritic, the resulting letter looks like this: र्

Many pairs of Devanagari letters can combine to form ligatures. In Latin script, ligatures are usually similar to the letters from which they're formed – for example, æ is clearly recognisable as a combination of a and e – but this is not always the case: the ampersand & originated as a ligature for et, for example.

In the example you've found, the comination of र् and इ can be written either as र्‌इ or र्इ 1 … the meaning is identical, and both are understood by readers of Devanagari script.

So, both Firefox and Safari are displaying the characters correctly. Chrome isn't, which may be an issue with the font being used, or with Chrome itself.

1 In Firefox on my machine, with a font capable of rendering the appropriate ligature, these two look different (because I added a Zero Width Non-Joiner in the middle of one but not the other). In the circumstances, your mileage may vary.

Zero Piraeus
  • 56,143
  • 27
  • 150
  • 160
  • Thanks. That was helpful in understanding the issue to some extent. I did not know about ligature until now! I found out that I was facing this issue with two letters only, so for now I'm running a replace function before saving the text in DB. The replace function basically replaces all occurrences of र्इ (the ligature, faulty one) with ई (apparently single unicode character). Since the ligature is not rendered consistently in all browser, this seems like the only solution. What do you suggest? – TheKalpit Mar 16 '19 at 08:03
  • 1
    I'd perform the replacement when you render the text (i.e just before sending it to the browser) rather than when you save it, because the latter is destructive. Once you've replaced characters in the database, it's impossible to undo that without also replacing what was already the single character ई in the original text with the ligature र्इ. Note that, according to the Unicode Consortium, र्इ and ई are ***not*** identical in meaning, but merely [confusable](https://unicode.org/cldr/utility/confusables.jsp?a=%E0%A4%88&r=None) (in the same way that 0 and O are confusable in Latin script). – Zero Piraeus Mar 16 '19 at 08:40