New testbed for OpenType Layout features: Firefox 4 (beta 3)

twardoch's picture

Firefox 4 (beta 3) has added OpenType Layout support, controllable through private CSS extensions. It works on Mac OS X by default, while in the Windows version of Firefox 4, you need to open the URL about:config and set the gfx.font_rendering.harfbuzz.level option to 1.

This is quite an interesting opportunity for font developers, and especially Python scripters. You could produce complex HTML renderings of your fonts including OpenType Layout feature previews, right out of your font editor such as FontLab Studio. Combined with the fact that Firefox supports webfonts in OTF and TTF formats, it's trivial to generate a simple web page.

The CSS property to use in -moz-font-feature-settings. The mechanism is documented on the Mozilla Hacks blog.

Firefox 4 uses HarfBuzz, an opensource OpenType Layout library which provides a similar functionality to Uniscribe. HarfBuzz supports user-controllable OpenType Layout features as well as complex-script shaping rules. This all makes it a lightweight environment to test your OpenType Layout features. Unfortunately, Firefox currently does not print using webfonts, so you won't be able to get a PDF with your font showings out of Firefox easily.

Correction: Firefox uses harfbuzz-ng, a "next generation" version of the library, which does not yet integrate complex-script shapers. So FF4 is, for now, good just for testing user-controllable OT Layout features.

Here's an example which renders "Hello small caps world!", in which "small caps" is rendered in OpenType small caps (with the "smcp" feature applied).


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
<!--
@font-face {
font-family:'TestFamily';
src: url('MyTestFont.otf') format("opentype");
}
-->
</style>
<title></title>
</head>
<body>
<p style="font-family:'TestFamily';font-size:36px;">
Hello <span style="-moz-font-feature-settings:'smcp=1';">small caps</span> world!
</p>
</body>
</html>

Enjoy!

Best,
Adam

clauses's picture

About freakin' time. Thanks to the people involved in pushing this very important aspect of text handling under HTML. It's there now, other browsers will follow if they know what time it is.

twardoch's picture

One thing I should point out: Firefox 4 uses "private" CSS extensions, with the prefix -moz-, which is the way to do it before new aspects of CSS have been standardized.

But the really good news is that an even more comprehensive mechanism for handling OpenType Layout features in CSS has been submitted for standardization at the W3 Consortium (I'm proud to say that I had a tiny little part in that). The current editor's draft of the CSS Fonts Module Level 3 specifies the "official" syntax, which is quite similar to that used by Firefox 4. Once the CSS3 Fonts draft is accepted, browser makers will be able to implement the official syntax. So things are on the way in the right direction.

And of course, it would be useful to provide a link to the Firefox 4 beta which does all this! :) On the Mac, you can copy Firefox.app from the .dmg to a temporary folder, rename it to Firefox 4.app and then move it to the Applications folder. This way, you'll be able to keep the release version of Firefox 3 untouched. You won't be able to run both versions at the same time, but you can quit one and run the other.

John Hudson's picture

This seems an opportune moment to remind people of the CSS3 Fonts Module briefing/dialogue in Los Angeles next week.

gferreira's picture

I'm currently testing the latest beta of Firefox 4 (Mac). Overall good impression so far (faster, cleaner interface), but I've come across a problem:

It seems that Firefox is doing some funky ppem-specific adjustment to spacing — automatically increasing tracking for bigger text sizes. (?)

Is this behavior documented somewhere? Is there a way to turn this “feature” off?

clauses's picture

I can't get my arbitraty fractions to work. And I've seen kerning do strange things too.

ralf h.'s picture

All the replacements I tried worked like a charme: http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype...

But I couln't use my CFF font with 2000 UPM - the spacing was all messed up.

clauses's picture

Aha! My problem font was CFF with 2048 UPM too.

gferreira's picture

Looking closer at the issue after a few weeks with the latest beta, it seems that Firefox is messing up with the space character only – stretching it for smaller PPEM sizes, and shrinking it as PPEM size increases.

For a type designer this is quite annoying. The width of space characters is part of the design and should be respected by the rendering engine.

This was probably intended as a feature (optical spacing), but it should be optional and not activated by default.

gferreira's picture

The issue has been reported by users, so let's hope Mozilla fixes it in the next release.

Syndicate content Syndicate content