IPA and diacritic rendering

Question

In revision #2 of an answer I wrote, there's a diacritic under [c].

On my computer, it looks like this:

But for Darius, it looks like this:

The diacritic is way to the left of where it's supposed to be! :-(

In revision #3, we have the opposite situation. I managed to fix it so it looks right for Darius, but it looks wrong for me!

---

So basically, this is the situation:

　Revision #2 looks right for me, but wrong for Darius.

　Revision #3 looks wrong for me, but right for Darius.

Which one of our browsers is rendering it correctly? How should I fix it, if it's broken? Help!

---

OS/Browser information: My screen shot is from SeaMonkey on Linux, but it looks the same for me in other browsers on the same computer - here are screen shots from Firefox and Chrome. I believe Darius is using Firefox on Linux, but he says the same thing happens in Chrome.

Answer 1

It looks like this is a problem caused by the font fallback system (in Ubuntu at least) not finding the combining character in the font that's currently being used for the surrounding text and having to find another to use which does (link to the conversation on chat: http://chat.stackexchange.com/transcript/message/18123066#18123066).

However, when the two fonts are rendered together it sometimes causes rendering problems for some reason. For example if "Liberation Mono" falls back to "DejaVu Sans Mono" it renders the combining char after rather than before.

---

The best solution to this problem might be to gather a list of fonts which have support for IPA and add a special syntax for IPA text (maybe even just make it /.../ and/or [...] so that it's reasonably backwards-compatible?) to the Furigana engine so the OS/font rendering system doesn't have to fall back to another font.

I think the list could include "Lucida Sans Unicode" for Windows, but I'm not sure exactly which fonts are the best on Linux/Mac/iOS/Android etc.

Edit: English Wikipedia apparently uses (or used) the following fonts for IPA, so maybe these would do the job:

.IPA {
        font-family: Chrysanthi Unicode, Doulos SIL, Gentium, 
                     GentiumAlt, Code2000, TITUS Cyberbit Basic, 
                     DejaVu Sans, Bitstream Vera Sans, Bitstream Cyberbit,
                     Arial Unicode MS, Lucida Sans Unicode, 
                     Hiragino Kaku Gothic Pro, Matrix Unicode;
        font-family /**/:inherit;
}

Answer 2

In Unicode, combining characters come after the base character, and therefore the correct order to combine U+0063 Latin Small Letter C with U+031F Combining Plus Sign Below is U+0063 U+031F. See Section 2.11 “Combining Characters” in the Unicode Standard.

In revision 2 of the answer, U+031F is attached to the character before it, namely U+005B Left Square Bracket. This is not what you intended.

If revision 3 does not render correctly in your browser, it must be a bug or limitation in your browser (or somewhere else in your system).

Answer 3

cypher updated the furigana script so that [[double brackets]] and //double slashes// get turned into single brackets and single slashes with a special list of fonts that should work for IPA.

I edited my answer to use the new double bracket syntax:

And now it works, even on my computer! Thanks everyone! :-)