When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser. The result is that Firefox 3 has improved support for font kerning, ligatures, international text, partial ligatures, font hinting, anti-aliasing, font types, and font selection. Firefox 3 represents a huge step forward in font support and text rendering, and Mozilla developers are already working on further enhancements for future releases.
When Mozilla developers decided to incorporate the Cairo subsystem and build a new graphics layer from scratch, they also decided to completely rework the system that renders text in the browser.
Text is an incredibly important part of the Web. While graphics, audio, and video are increasingly common, we still spend the majority of our time on the Web just reading stuff. All the words you read in a web browser are rendered using a font which contains a set of glyphs used to form individual letters. For more simple written languages there may be a straightforward one-to-one mapping of characters to glyphs, but for more complex languages, one glyph may represent multiple characters.
Fonts can also contain additional features that let applications know how render the text in more advanced ways.
Kerning
Image source: Wikimedia Commons
Firefox 3 has improved support for font kerning, a fairly common font feature used to create visually equal spaces between letters. These fine spacing adjustments help the eye move more smoothly along a line of text. While these adjustments are usually quite subtle, they result in text that is much easier to read, which is why books and printed media make use of kerning most of the time. Not all fonts include kerning information, however, so Firefox can only kern those fonts that support it.
Ligatures
Font ligatures are now fully supported in Firefox 3. In written languages a ligature occurs where two or more letter-forms are joined as a single glyph. Ligatures usually replace consecutive characters that share common components, but aren’t widely used in English and other Latin language fonts. One English font that does make heavy use of ligatures is Zapfino, which has multiple sets of ligatures, some “required” and other “discretionary” that can be optionally applied.
Zapfino font ligature demo in a Firefox 3 textbox. Turns out Firefox doesn’t know how to spell Zapfino.
Ligatures in international text
While ligatures aren’t used that often in English, they are used very frequently in languages such as Arabic and Hindi (among countless others). Ligatures are required to render these languages properly.
Below is an example of a line of Arabic (which is read right to left) being written without ligatures (top) and with ligatures (bottom). The top version is actually unreadable, as it cannot be rendered correctly without ligatures.
Partial ligatures
Image source: Robert O’Callahan
Another feature of the new text system is the ability to lay out a string of content and then render any substring using the whole-string layout. This is important because the user should be able to select any substring, and Firefox needs to draw that substring using the current selection colors. Ligatures complicate this, but Robert O’Callahan has devised a system that makes this work in Firefox 3.
Hinting
Image source: Wikimedia Commons
Firefox 3 also has improved support for font hinting, another feature that complicates font rendering. Fonts can contain and run small sets of mathematical instructions to tune glyph shapes at different sizes. This is often seen at small sizes where it is used to increase readability, but it means you can’t uniformly scale a font as the font size changes. This is why web page layout can change if you’re zooming in or out.
Font smoothing, anti-aliasing
There are a number of ways to anti-alias text and all three major platforms (Windows, OS X, and Linux) do it differently. Joel on Software covers the differences nicely, so I won’t go into a lot of detail here. Suffice it to say that Firefox 3 continues to obey system settings on all platforms, so text in your browser will look like text in the other applications on your system.
Font types
There are a number of different types of fonts, the most common of which are OpenType, TrueType, Type 1, Postscript, and bitmap. The focus generally seems to be on OpenType these days, which supports all sorts of complicated features, but the others are still commonplace on many systems. Firefox 3 is now able to render all these different types of fonts properly, where most other browsers, including Firefox 2, cannot.
Font selection
Firefox 3 tries as hard as it can to render readable text no matter what fonts are requested. Pages often don’t specify a font at all, but if your computer contains a font that can render the text or glyphs in question, Firefox 3 will find that font and use it when rendering the web page. This means that Firefox 3 can successfully render text where other browsers fail.
What’s next?
While font support and text rendering in Firefox 3 have been improved a great deal, this isn’t the end of the story. Mozilla developers are already looking at supporting even more font and text features that could appear in future versions of Firefox, including better font family merging, font-stretch, text shadows, and downloadable fonts. For now, Firefox 3 represents a huge step forward in font support and text rendering. The new graphics layer has made it possible for Firefox 3 to support more languages (and therefore more localizations) than ever before.
