Displaying Ligatures and Glyph Variants on Web Pages (8/2008)

In normal word processing in Latin Script you can often compose and print special typographical features like ligatures and glyph variants without problems. The fonts Zapfino and Hoefler Text are especially suitable for this.

The most common standards for displaying text on the web -- HTML, CSS and Unicode -- do not, however, offer any facilities for displaying these typographical features, and whether they will ever do so is uncertain. In general this is supposed to be taken care of by the font and text engine technology available in the OS and apps on the viewers' machine. Unicode does have codepoints for a few ligatures, but they are not used in practice. Some discussions of including this in future versions of CSS can be found under the subject "Advanced Font Features" on the www-style mailing list, and the draft where this should eventually appear is here.

Web browsers themselves currently have no ability to switch glyph variants in Latin script and have differing capabilities regarding ligatures. In OS X, for example, Opera and Firefox can display the normal Zapfino ligatures but Safari is more limited. Firefox can also display ligatures from Windows OpenType fonts.

Generally the only easy way to make sure your ligatures and glyph varients are displayed to all web viewers is to convert the text in question into a graphic, such as .jpg or .png. Apple's website creation program iWeb will do this automatically if you add even an invisible degree of shadowing to the text in question. Flash (.swf), which is widely used in websites, can also handle such text, along with its variation sIFR. Anything you compose in Apple Keynote can be exported as .swf and incorporated into your pages. PDF, which all browsers can display, will work as well, and can be produced in a variety of ways.

Another technology that can be used for this purpose is SVG (Scalable Vector Graphics). This uses a standard type of XML file to generate graphics and text, including ligatures and glyph variants, using embedded fonts. Unfortunately browser support for the text dimensions of SVG is still fragmentary. However Squiggle should work and Safari may work if you can install the Adobe SVG plugin. A test page demonstrating the use of SVG to display 4 variants of the H glyph in Hoefler Italic can be found here:

svgtestpage

For creating SVG text you can use the program Inkscape. A tutorial is here. Unfortunately neither Inkscape nor other SVG authoring programs yet have facilities for embedding fonts or doing ligatures or variants, so that part of the coding has to be done by hand. Converting ordinary fonts into the svg variety can be done using FontForge.