Template:IPA fixes broken display of International Phonetic Alphabet (IPA) characters in MS Internet Explorer 6 for Windows. In other web browsers, it doesn't affect font display at all.

It also allows all registered Wikipedia users to specify styles for IPA text by editing their monobook.css style sheet.

An example, placing a phonetic rendering of the word characters in Template:IPA:

{{IPA |/ˈkæ.ɹekˌtərz/}}

The result will be a span with a style attribute, like this:

 <span class="IPA" style="font-family: Lucida Grande, 

  Arial Unicode MS, Lucida Sans Unicode, Gentium, Code2000; 

  font-family /**/:inherit;">/&#712;k&aelig;.&#633;ek&#716;t&#601;rz/</span>

Which appears in your browser as:

/ˈkæ.ɹekˌtərz/

Without template:IPA:

/ˈkæ.ɹekˌtərz/

[The last two should only look different if you are using Internet Explorer on Windows.]

Please place all IPA text into Template:IPA, even if it doesn't have any special IPA characters, like this: /aj pi ej/. This will allow users to format all examples of IPA text consistently, with their choice of fonts, colours, etc.

The class="IPA" attribute exists so that Wikipedia users can apply their own style sheets to text in Template:IPA. See #Applying custom styles to IPA text, below.

The first declaration font-family: Lucida Grande, Arial Unicode MS, Lucida Sans Unicode, Gentium, Code2000; actually lives in a sub-template at Template:IPA fonts. It lists a series of fonts that are known to contain IPA characters.

The second style declaration font-family /**/:inherit; overrides the preceding font declaration, and tells the text in Template:IPA to use the default font inherited from it's surroundings, in every browser except MSIE 6.0. The empty comment placed just in the right spot confuses MSIE 6 and prevents it from applying this declaration. This is a documented way of hiding CSS from MSIE 6. [1]

The font list is at Template:IPA fonts [edit]. Remember that Template:IPA is intended to display IPA characters. Criteria for selecting fonts:

• Full IPA character set.
• Normal and bold weights, for emphasis.
• Sans-serif, matching Wikipedia's default font.

Less important criteria:

• Having a wide range of other international characters.
• Having italics.

Do not surround font names with single quotes, because Wikipedia's software will escape them with backslashes. CSS recommends single quotes around font names with spaces, but doesn't require them.

About the fonts

Arial Unicode MS

• sans-serif
• roman only, but automatically generated bold & slanted works in Windows
• comes with MS Office for PC (or Mac?)
• (unsure) is available for Linux through http://corefonts.sourceforge.net/ ; also through distribution-specific methods (ie. YaST)
• places double combining modifiers too far to the left by 1 em

Lucida Sans Unicode

• sans-serif
• comes with Windows XP
• doesn't include some IPA characters
  • double combining inverted breve
  • [what others?]

Lucida Grande

• sans-serif
• comes with Mac OS X
• roman and bold only

Code2000

• serif
• shareware font from James Kass

Gentium

• serif
• free font from SIL
• roman and italic only

You can apply your own custom styles using the .IPA class selector in your local style sheet. If you are a registered Wikipedia member, you can put custom styles into your monobook.css style sheet.

Try this: place the following text into User:XXX/monobook.css, where XXX is your username.

.IPA { color: green; }

• Wikipedia:Manual of Style (pronunciation)
• Wikipedia:Pronunciation guide
• Template:IPA notice - notice indicating that an article contains IPA
• Template:ConvertIPA - notice for editors, that an article contains SAMPA or or pseudo-English transcription needing conversion to IPA
• Template:Polytonic - font specification for Polytonic Greek
• Template:Unicode
• Category:Pages containing IPA

• Alan Wood’s Test for Unicode support in Web browsers

Just so people understand, this template forces its argument to appear in a <span> tag forcing the use of Unicode fonts. This ensures that users can see the IPA characters in Windows Internet Explorer, which otherwise doesn't display IPA characters for anonymous users. Nohat 18:21, 31 Dec 2004 (UTC)

Actually, I'd say that matching the rest of the page and having bold characters is more important. A well-written browser will substitute characters from a different font if the specified font doesn't have those characters. Of course if the most common browser were well-written, we wouldn't need this template at all. However, we do need it, but we shouldn't degrade the appearance of pages for users whose browsers are well-written. Therefore, a an attractive, well-matched font with roman and bold characters should be the primary criteria. Code2000 is widely regarded as a font of last resort due to its ugliness (as well as its non-freeness) and doesn't match the rest of the pages because it's a serif font: sans-serif is specified for body text in Wikipedia's CSS. Nohat 07:04, 9 Jan 2005 (UTC)

Are there any instances on Wikipedia where IPA is formatted in bold-face? I can't think of a situation where it would be desirable. —Michael Z. 16:17, 2005 Jan 9 (UTC)

It's used on several pages to highlight particular symbols in a transcription. See [2] Nohat 19:37, 9 Jan 2005 (UTC)

Good example. I've updated the criteria, and took the liberty of moving discussion down here. —Michael Z. 01:17, 2005 Jan 10 (UTC)

Wouldn't it be useful to make a template that is just the desired CSS font arguments and use that template in table headers so you can avoid putting the IPA template in at every item in the table? I'm not sure how this would interact with Wiki table markup, but I think it would work.

Done, at Template:IPA fonts. It renders the following

 Template:IPA fonts

It's just the font list, so it can be used in a style attribute to specify font-family or font, or even (heaven forfend) in a <font> element. I've put it into template:IPA, so the font list for all IPA in Wikipedia can be edited in one place. —Michael Z. 01:59, 2005 Jan 10 (UTC)

Also, as you probably remember I made a separate Unicode template a while back. In that template we recently changed the order of the fonts. What is your logic for the order you're using? It would be good to put the logic here in the talk page. --Chinasaur 19:40, 8 Jan 2005 (UTC)

The logic has been changing as users have edited this template. See the history, and the font list above, for some insight. If the activity settles down, maybe I'll write it out for this talk page. —Michael Z. 01:59, 2005 Jan 10 (UTC)

AxSkov, which IPA characters does Arial Unicode MS have that Lucida Sans Unicode does not? The reason I want to move Arial further down the list is that it has a bug in the way it displays double combining modifiers (which are used to represent some affricates). See Talk:IPA in Unicode#Other symbols for the technical details and examples. —Michael Z. 21:56, 2005 Jan 8 (UTC)

After doing some testing, it appears to me that Lucida Sans Unicode doesn't include those characters anyway, so I guess it doesn't matter which MS font comes first in that regard. I've put Lucida Grande first, so Mac OS X users will see it correctly even if they happen to have the MS fonts. Lucida Grande doesn't have italics, but I think IPA would never be italicized anyway. —Michael Z. 22:22, 2005 Jan 8 (UTC)

I'd like to propose changing the way Template:IPA works, so that it only has an effect in MSIE 6 for Windows. This requires two changes:

1. Add a style sheet directive to Wikipedia's existing MSIE-only style sheet [3]:

.IPA { font-family: Lucida Grande, Arial Unicode MS,
       Lucida Sans Unicode, Gentium, Code2000; }

2. Edit Template:IPA so that it applies the IPA class:

<span class="IPA"> [content] </span>

To specify IPA in a different scope (e.g., a table or a div), an editor can simply add class="IPA" as an HTML attribute. Multiple classes can be specified: class="toccolours IPA". Users can also use the .IPA selector to specify styles in their own user style sheets at User:XXX/monobook.css.

We'll need the co-operation of an admin or developer to change the style sheet.

Why?

• The font specification is only required for one browser: MSIE 6/Windows. It's a hack.
  • Other modern browsers automatically substitute fonts containing the characters (Mozilla, Firefox, Safari)
  • Some older browsers won't display IPA anyway (MSIE 5/Mac)
• The current method needlessly overrides the font display for other browsers, including user-selected fonts, and may break the display. It will override:
  • Web browser's default font
  • Web browser's automatic font substitution (e.g., if the default font doesn't have IPA characters
  • User's selected font in browser preferences
  • User's local style sheet
  • Wikipedian's fonts specified in User:XXX/monobook.css.
• Users might be tempted to use this for other Unicode character ranges, where it may may degrade display in other browsers (I've already seen it happen). If its application is restricted to a single Windows browser, then changes are less likely to do any damage.
• This solution allows registered Wikipedians to specify their own font for IPA in their monobook.css style sheet.

Disadvantages:

• The font specification list would live in a style sheet, where it can only be edited by an admin or developer.

Any comments? —Michael Z. 20:22, 2005 Jan 14 (UTC)

After I wrote the proposal above, I got an idea. Template:IPA now looks like this:

<span class="IPA" style="font-family:Lucida Grande, Arial Unicode MS, 

     Lucida Sans Unicode, Gentium, Code2000; font-family:inherit;">

• The second font-family declaration overrides the first, in CSS-compliant web browsers.
• MSIE/Win doesn't understand the inherit value, so it still applies the fonts.
• The class="IPA" attribute allows users to specify their own styles. Add something like this into your style sheet, at User:XXX/monobook.css (where XXX is your user name):

.IPA { color: red; }

—Michael Z. 20:40, 2005 Jan 14 (UTC)

• The problem is that on IE6/XP the second font-family spec overrides the first, and so, unless there's an "inherit" font installed, it winds up reverting to whatever font is used in the surroundings of the embedded span (it inherits, in other words!). I've tried putting the special "inherit" tag at the beginning of the fontlist, but that didn't work either. IE seems to function OK if the inherit tag is at the end of the fontlist (current revision), but I have no way of testing what it does on other platforms. A. Shetsen 22:31, 14 Jan 2005 (UTC)

Aw crap—that browser's brokenness has cost me hundreds of hours of work. I read in my reference that it doesn't support "inherit", but never thought that the reference to a non-existent font would completely replace the previous declaration. I'm going to try something else. If I revert it temporarily it's because I'm doing some testing. —Michael Z. 23:03, 2005 Jan 14 (UTC)

Oops. Same diff as with font-family. Seems a deeper solution is called for. OK. I'm installing MediaWiki on my Pentium 300 with 64 MB memory :). A. Shetsen 23:15, 14 Jan 2005 (UTC)

Ta-dah!!! on IE6. Thank you, Michael. Alex Shetsen. A. Shetsen 23:19, 14 Jan 2005 (UTC)

[?] I tried something else, but it didn't work so I reverted the template. Looks like it's back to plan A: #Replace with IE-specific style sheet class, which should be quite easy to do if we can find a helpful admin. —Michael Z. 23:27, 2005 Jan 14 (UTC)

Okay, I'm going to try something else. I found two CSS filters to hide CSS from MSIE. I'll see if these can work. —Michael Z. 07:10, 2005 Jan 15 (UTC)

1. The !important property doesn't work in MSIE4, 5 and 6, so the second declaration should override the first in these browsers.

<span class="IPA"style="font-family:inherit !important; font-family:Lucida Grande, 

     Arial Unicode MS, Lucida Sans Unicode, Gentium, Code2000;">

Inherits font-family in Firefox/Mac, but applies the second declaration in MSIE6/Win (good), Firefox/win and Safari (not what we want).

2. spaced empty comment in the property should hide the declaration from MSIE6/Win only.

<span class="IPA" style="font-family:Lucida Grande, Arial Unicode MS, 

     Lucida Sans Unicode, Gentium, Code2000; font-family /**/:inherit;">

Method 2 seems to work right. Inherits font-family in Safari and Firefox, but applies the IPA font spec in MSIE6/Win. YAY! Please look at some IPA and tell me if everything looks right to you. —Michael Z. 07:40, 2005 Jan 15 (UTC)

• Looks good!! I've tested it with and without my custom monobook.css file. IPA and the rest of the conten display well on my XP/IE6 combo. Thank you!! A. Shetsen 19:02, 15 Jan 2005 (UTC)

Phew! I was starting to get discouraged. I'm still going to see about adding the .IPA font declaration to a browser-specific style sheet, but it's nice to get it working as it should. —Michael Z. 00:25, 2005 Jan 16 (UTC)

Looks very good on a common public computer with no particular extras added. This is a REAL improvement! Kudos!
--Ruhrjung 13:41, Jan 24, 2005 (UTC)

Dear anonymous user from Australia (203.164.184.61, etc.),

Why do you keep changing this template? It's set up to work around a font-display inadequacy in MS Internet Explorer for Windows, and to not do anything in other web browsers. There's an explanation in #Technical details, above. If you're changing it for another reason, please let us know here.

You can override the font display for yourself only, by putting something like the following in your browser's user style sheet, or by registering as a Wikipedia user and putting it in your own Wikipedia style sheet. Registration has other benefits, too.

 .IPA { font-family: Arial Unicode MS; }

—Michael Z. 2005-01-22 16:54 Z

It's important, if surrounding the IPA characters with slashes or square brackets, to put these inside the IPA template, for instance {{IPA|/.../}}, rather than /{{IPA|...}}/, as otherwise a spurious space will appear after the leading slash or bracket. I realised this after seeing some of my edits corrected by User:Angr. rossb 06:57, 18 Feb 2005 (UTC)