The Subtleties of Browser Devanagari Support

Browser support for Devanagari (the script used to write Hindi) has come a long way in the last decade. When I started writing my Devanagari tutorial back in 1998, I had to edit images of each Devanagari character, as Unicode support in most operating systems was merely a fancy idea and browser display of Devanagari characters was only a pipe dream. In 2013, all the major operating systems support Unicode, and all the major browsers display Devanagari characters. Even Devanagari joining rules are followed, such as automatically joining व and ा to form वा. But there are still little wrinkles left to be worked out.

The letter ा (a mātrā of आ) probably has a dotted circle in front of it in your browser. This is the font's way of indicating that this form of the letter does not usually stand alone—a consonant usually appears in place of the dotted circle. But in my Devanagari tutorial, I wish to display the letter ा without the dotted circle, so that readers may see exactly what the letter looks like when it appears in the middle of a word, as well as when using the letter for its phonetic sound when displayed within English words. The way to do this, according to Microsoft's OpenType Shaping Engine documentation, is to include a Zero-Width Joiner (ZWJ) U+200D before the letter. (Microsoft's OpenType Malayalam documentation has further examples.)

The problem is that ZWJ+ा does not cause the dotted circle to disappear on either Firefox 22, Chrome 27, or even IE 10. Interestingly, a standard Nonbreaking Space (NBSP) U+00A0 causes the dotted circle to disappear, but only on Chrome 27 (not on Firefox 22 or IE 10). In fact I could find no space character or word joiner to cause the dotted circle to disappear on Firefox 22 or IE 10.