Displaying an IPA symbol

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Its name is 'syllabic'.  Its shape is a small vertical bar. Its unicode
is 031E, decimal is 789.  When preceded by a letter, it will appear
underneath it, to indicate the letter is a syllable by itself.

But neither the unicode nor decimal work on my web page.  They appear
as small square.  At the css font-family, I entered 'lucida sans

Help is greatly appreciated.

Re: Displaying an IPA symbol

Quoted text here. Click to load it

I'm afraid the identity of the character is uncertain.

Quoted text here. Click to load it

U+031E is COMBINING DOWN TACK BELOW, which does not match your prose
description. In IPA, it indicates vowel lowering or opening.

Decimal 789 is hexadecimal 315, but U+0315 is COMBINING COMMA ABOVE
RIGHT, so I don't think that's your character either.

Quoted text here. Click to load it

Then you most probably mean the character U+0329 COMBINING VERTICAL
LINE BELOW. It is named according to its shape in Unicode, but a
comment in the Unicode code chart says: "IPA: syllabic".

Quoted text here. Click to load it

As usual, the URL of your attempt would have been useful. There are
_so_ many things that can go wrong.

In principle, you can just write ̩ in HTML and expect browsers to
handle the rest. In practice, there are several problems:
- some browsers don't recognize such references (and using a decimal
  reference, ̩, would give a slightly wider coverage)
- not all fonts contain a glyph for the character
- very few browsers can correctly produce a rendering where the
diacritic appears suitably positioned, though many browsers manage to
produce some reasonable rendering in simple cases (no multiple
diacritics, no descenders in the base character).

Opinions disagree on whether it would be beneficial to use CSS to
suggest some font(s) that might contain the character; I won't repeat
the pros and cons here.

The fileformat.info site is usually a good place to get a rough idea of
font support to characters. However, the information at
is questionable. The Lucida Sans Unicode font is not listed there, and
neither is Arial Unicode MS.

My tests, with
suggest that the results vary a lot. Fonts exist in different versions,
and the implementation of diacritics varies a lot. For example, on one
computer, using IE 6, I get
- a box overprinted on the letter when Tahoma is used
- the letter with no diacritic when Lucida Sans Unicode is used
- the diacritic printed on the right, producing a symbol that looks
very much like the letter eng (or the Greek small letter eta in some
shapes), when Arial Unicode MS is used.

Thus, none of the results is acceptable. On IE 7 beta, I get the letter
with some diacritic below it for all three fonts, but only the Arial
Unicode MS version looks right. The Lucida Sans Unicode diacritic looks
very much like a dot, and the Tahoma diacritic is misplaced.

The conclusion is that in HTML authoring for the WWW, the use of IPA
diacritics is very risky. Users may see a mess, or no diacritic, or a
wrong diacritic, or a quite wrongly positioned diacritic, or (probably
rather rarely) a tolerable version. At least I would recommend
- _not_ setting the font in HTML or CSS
- informing users about fonts that might work for them (with a
suggestion to use their browser's tool for setting the default font)
- including a short test text with an image representing a correct
rendering alongside with it.
Actually, if I did something like that, I might even consider adding a
suitable piece of JavaScript for setting the font of the texts
containing IPA, using a simple dropdown menu. This would be convenient
to people who dare to use a browser with JavaScript enabled, at least
on pages that explain what _useful_ they do with it. If users have to
set the _overall_ font of the page, in browser settings, they typically
have to do that rather inconveniently, and they also need to change the
default font back to something more suitable for general browsing.

Yucca, http://www.cs.tut.fi/~jkorpela /
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Re: Displaying an IPA symbol

Jukka K. Korpela wrote:
Quoted text here. Click to load it

Hi Jukka:

Thanks a lot for your detailed explanation.  I got the IPA information


It turned out that the code was from the row below that for the
'syllabic' symbol.

My testing shows:
The Arial Unicode MS works best on Firefox browser, but does not show
up on IE5.  The Lucida Sans Unicode font is displaced a little on both
IE and FF.  The Tahoma font is substantially displaced on both the IE5
and FF.  I decide to use the Lucida Sans Unicode font in my page, as
there will be svg animation in it which must be opened with IE.

Again, your expertise and help are greatly appreciated.


Site Timeline