Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

August 9, 2006

I Give Up

This blog uses SVG for figures, wherever possible. If you have difficulty reading the text, you can bump up the font size in your browser, and the equations and the figures scale up smoothly too. The labels in the figures are actual text, which makes the SVG searchable, and — at least in principle — accessible to the blind.

Unfortunately, for an increasing fraction of my readers, the text in the figures is completely spooged. What they see is the result of the native SVG renderer (in Mozilla/Firefox, Opera or WebKit) substituting some default font for the embedded font in the figures. In running text, substituting fonts mostly produces acceptable results. In figures, where precise placement and font metrics are crucial, the result is almost always a disaster.

Adobe Plugin rendering
An SVG figure, rendered using Adobe’s plugin.

That’s why Adobe Illustrator embeds the fonts (subsetted to just the glyphs used) using CSS2 Font Descriptions. The Adobe SVGViewer plugin supports this, as you can see above. The other renderers, however, do not.

Native rendering
The same figure, rendered using Mozilla’s native SVG renderer.

Once upon a time, I could assume that anyone, who could see the SVG figure at all1, was seeing it with the Adobe plugin. No longer. Firefox and Opera have their native SVG renderer enabled by default. So will the next version of Safari. Increasingly, viewers are seeing the broken version of the figure, instead of the expected one.

The absence of support for (any form of) font embedding is a bug in Mozilla. I consulted with my guru in such matters, Henri Sivonen, and it’s pretty clear that font embedding is not going to get implemented anytime soon, if ever.

The only rational choice, alas, is to give up on text being text, and convert all fonts in the SVG figures to outlines.

In Adobe Illustrator, after preparing the figure, one

  1. does a Select→All, and then Type→Create Outlines.
  2. opens the SVG file in a text editor and changes

    width="NNN" height="NNN"

    to

    width="100%" height="100%"

    to deal with this bug.

I’ve “fixed” the figure in my most recent post. As time permits, I’ll go back and “fix” the figures in my older posts as well.

1 Everyone else would see the GIF fallback image.

Posted by distler at August 9, 2006 10:32 AM

TrackBack URL for this Entry:   https://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/887



6 Comments & 0 Trackbacks

Re: I Give Up

“it’s pretty clear that font embedding is not going to get implemented anytime soon, if ever”

Even if the fonts were embedded, different viewers could still use different text layout engines. The strength of PDF is that it stores the output of the text layout algorithm rather than the input.

“does a Select→All, and then Type→Create Outlines.”

In Illustrator CS2 the format option dialog (after the saving file picker) offers the choice of converting text to paths. The choice is remembered.

Posted by: Henri Sivonen on August 9, 2006 3:16 PM | Permalink | Reply to this

Re: I Give Up

Even if the fonts were embedded, different viewers could still use different text layout engines. The strength of PDF is that it stores the output of the text layout algorithm rather than the input.

For my humble purposes, that might have been “good enough” (or might not).

Without embedded fonts, the results are definitely horrid.

Since Flash supports embedded fonts (indeed, that’s the basis for techniques like sIFR), SVG would seem to have a dim future, even in its purported role a Flash competitor.

Posted by: Jacques Distler on August 9, 2006 10:40 PM | Permalink | PGP Sig | Reply to this

Re: I Give Up

The more I learn about SVG, particularly when I talk to people who actually used to work on it at Adobe back in the day, the more I think it is hopelessly broken.

I hate to even suggest this, but you might want to look at Flash. I don’t know how accessible Flash is – I presume it has some accessiblity hooks, since Macromedia/Adobe is trying to push it as a full-fledged development platform. What I do know is that Flash ought to render with fewer problems across a much larger array of browsers. And it is definitely zoomable.

Although I wonder how you would allow people to comment with embedded Flash diagrams. That’s an XSS problem just waiting to happen…

Posted by: Evan Goer on August 10, 2006 1:27 AM | Permalink | Reply to this

Flash

What I do know is that Flash ought to render with fewer problems across a much larger array of browsers.

I probably shouldn’t inquire into how the sausage was made, but the Adobe SVGViewer plugin works quite nicely with the SVG output of Adobe tools (like Illustrator).

The damned thing about an open Standard, however, is that other people get it into their heads to write their own implementations. And then the interoperability woes begin …

Flash doesn’t suffer from this problem, I suppose. But that’s not a clear-cut plus.

Posted by: Jacques Distler on August 10, 2006 4:10 PM | Permalink | PGP Sig | Reply to this

Re: I Give Up

Your comment about embedded fonts needs to be broken into two sub-comments:

a) SVG renderers should support embedded and downloadable fonts.

Yes, they should, and indeed they mostly all do, per the SVG specification (Mozilla is an exception, at least for the support in Firefox 1.5 and 2.0 - further development there will arrive with Firefox 3.0)

b) SVG renderers should support the particular Adobe-specific font format that you (or your export software) chose to use.

Not so - they can support that if they want, and can find the documentstion. They must, however, support the SVG font format (which has the same structure as other SVG paths and is thus easy for an SVG implementation to support). Again, per the SVG spec.

So, please continue to use embedded or linked fonts in your SVG, but please use the format required by the SVG spec not some other format only supported by one implementation.

Posted by: Chris Lilley on September 15, 2006 9:00 AM | Permalink | Reply to this

Re: I Give Up

a) SVG renderers should support embedded and downloadable fonts.

Yes, they should, and indeed they mostly all do, per the SVG specification (Mozilla is an exception, at least for the support in Firefox 1.5 and 2.0 - further development there will arrive with Firefox 3.0)

No they don’t. Neither Opera, nor WebKit, nor Mozilla support the SVG Font Module. Nor do they support CSS2 Font Descriptions (also a W3C Standard), which is the method actually used by Illustrator to embed the fonts.

I don’t know about the other two, but my sources in the Mozilla project indicate that they have no plans to start supporting either of these technologies for downloadable fonts.

So, on that point, I think your information is incorrect.

b) SVG renderers should support the particular Adobe-specific font format that you (or your export software) chose to use.

The font format is not Adobe-specific. The CEF format is, to my understanding, widely supported.

So, please continue to use embedded or linked fonts in your SVG, but please use the format required by the SVG spec not some other format only supported by one implementation.

In other words, do something completely useless, which is not implemented by any of the SVG renderers in common use? (And which, to the best of my information, they are unlikely ever to implement.)

Thanks, but no thanks.

Posted by: Jacques Distler on September 15, 2006 11:20 AM | Permalink | PGP Sig | Reply to this

Post a New Comment