All my pages

Browser font issues edit

Microsoft Internet Explorer (IE) handles fonts differently from other browsers. When the current font does not have a specified character, IE shows an empty square. (This behavior is particularly troubling in the IPA region of Unicode, where the symbols ɨ ʉ ɯ ɪ ʏ ʊ ɘ ɵ ɤ ɛ ɜ ɞ ʌ ɔ ɐ ɶ ɑ ɒ ɚ ɝ ˈ ˌ ʈ ɖ ɟ ɢ ʔ ɱ ɳ ɲ ɴ ʙ ʀ ɾ ɽ ɸ ʃ ʒ ʂ ʐ ʝ ɣ ʁ ʕ ɦ ɬ ɮ ʋ ɹ ɻ ɰ ɭ ʎ ʟ ʍ ɥ ʜ ʢ ʡ ɕ ʑ ɺ ɧ ɡ ɫ are not supported by the default font of IE.)

Other browsers, in contrast, search the installed fonts for the needed character. If the browser finds the character in a font, it uses that font to display the character. Usually this results in an appropriate display. In some cases, however, the font it selects in this way may not be ideal for displaying the character. Also, this method of selecting a font may result in changing fonts in the middle of a word. And rarely a font may contain a wrong character: For example, the Verdana combining characters bug may display а́е instead of Template:RUchar on some browsers.

The fact that IE does not display such characters at all makes it important to specify to IE what fonts to use. Style declarations have been created which use a CSS filter to declare font-families for IE and only IE. Here is an example of such a style declaration. (See below for a technical explanation.)

.IPA {
        font-family: DejaVu Sans, Segoe UI, Lucida Grande, Lucida Sans Unicode, Charis SIL, Doulos SIL, Code2000, Gentium, Gentium Alternative, TITUS Cyberbit Basic, Arial Unicode MS;
        font-family /**/:inherit;
}

History of font declarations in Wiktionary and Wikipedia edit

At first font declarations were placed in the template {{Unicode}}. Some of the fonts, however, that give the best overall Unicode coverage do not cover all IPA symbols; so a separate {{IPA}} template was created. Over time several other script templates have been created for other specialized code ranges.

Originally these templates contained their style declarations inline. On about October 2, 2005, however, the Mediawiki software was changed to no longer allow comments in inline style declarations (because they can be used for cross-site scripting attacks). See Wikimedia bug no. 3588. This change broke the CSS filter, which relies on a style comment. The experts at Wikipedia responded to this change by moving the style declarations from templates to Mediawiki:Common.css. (Inasmuch as the latter is not inline, it was not affected by the change.)

Moving the style declarations out of the templates has the additional advantage that it saves download length in template transclusions—sometimes several times per page. It also facilitates users declaring personal styles. On the other hand, moving to Common.css has the disadvantage that only sysops can edit the font-lists. (Or is that an advantage?)

Technical explanation of the font filter edit

The CSS declaration above declares a style which is to be applied to all HTML tags which specify the class="IPA" attribute. Here is how it works: First it tells all browsers to use a list of fonts that support the IPA range of characters; then the declaration “font-family /**/:inherit;” tells browsers to override that font list and inherit the font(s) from the surrounding scope. But the empty comment, /**/, placed in just the right spot confuses IE and prevents it from applying this declaration. Due to this quirk IE (and only IE) is left with the font list.