Another Stab at Online Outline Fonts

orest writes "Microsoft took a whack at it with WEFT. Bitstream tried TrueDoc. But someone has finally gotten somewhere with sIFR. sIFR allows web designers to render font outlines -- and thereby their preferred fonts -- in a visitor's web browser, without those fonts being installed on the visitor's computer. sIFR relies on JavaScript and Flash to accomplish its magic. A similar, bleeding-edge solution exists in Batik, an open-source SVG browser from the Apache Foundation."

Comments

Anyone see a problem with this?

[Anonymous Coward]

Javascript has its uses and its abuses. For a lot of browsing, it's best to have it turned off. But what happens if you have to have it enabled just to read the text?

I wonder if it's a good idea to sacrifice security because a web developer is addicted to a certain font.

Re:Anyone see a problem with this?

[WarpFlyght]

You don't have to have it enabled. It degrades gracefully -- if JavaScript is disabled or if the user doesn't have flash, regular text is displayed. That's the big advantage, and that's why it works well enough to have "arrived." Users who don't want JavaScript enabled don't lose any content, but users who do (a vast majority) see the page presented as the designer intended.

Re:Anyone see a problem with this?

[Niggle]

If you're running with something like Firefox's Flashblock extension then it doesn't degrade at all gracefully. You just get the usual click to play icon instead of the text.

I should add that whenever I install Firefox for somebody else, I always add this extension. 90% of flash on the web is used for ads that nobody ever wants to see. Most people are just amazed at how much it can speed up page loading.

Re:Anyone see a problem with this?

[Haeleth]

If you're running with something like Firefox's Flashblock extension then it doesn't degrade at all gracefully. You just get the usual click to play icon instead of the text.

They thought of that, as you'd know if you'd bothered to visit their site:

And hey, if you are using something like FlashBlock, which means you want to use Flash but only if it suits you, you may be interested in our Greasemonkey scripts which allow you to disable sIFR.

Using flash instead of images.

[numbski]

The only benefit I see to this is that it allows dynamic content where an image would have been used before.

I guess this is good, except I'm running flash click to play in Firefox, and have JavaScript pretty paired down.

This would count as a beneficial use of flash in my book. I've used WEFT and Bitstream's solution. Never did work in Mozilla. :\

If this will work well, then I'm all for it.

Mainstream Usage

[WarpFlyght]

sIFR has come far enough to be used on major websites. Aside from seeing it in places like one of the website of the person who perfected it, it's also appearing on mainstream websites -- take ABC News. Their headlines are rendered using sIFR for browsers that support it.

ironic

[same_old_story]

this is kind of ironic actually.

anybody that does lots of flash design will tell you, flash is a pain in the ass when it comes to type...
granted, using your font of choice is great for design, and a huge improvement over html's font families, but flash has lot's of problems with text rendering, sometimes smoothing too much or sub pixel positioning quirks. these issues can be avoided, but still photoshop, for example, renders much better looking type.

I guess when we get flash's new text rendering engineon the next flash player version, this will improve...

Re:ironic

[jonadab]

> granted, using your font of choice is great for design

On the web, it's great for *bad* design.

On paper, it's different, for a couple of reasons. For one thing, the users can't possibly substitute their own preferred fonts into a paper publication, so the only two options are for the creator to choose nice ones, or for the creator to choose ones that aren't very nice (*cough* Times), don't go well together, or cetera. But there's another difference: on paper, the text is rendered to a much higher resolution, which makes it practical to use some fonts that are a decidedly bad idea on the web -- script fonts, for instance, can be tastefully used in a print publication, but on the web, for the sake of legibility, you're pretty much limited to a basic serif font, a basic sans, or something fixedwidth, unless you're doing just one or two words (in which case, .png works okay). Anything else and you either have to set the point size so high it looks rediculous, or else the user's going to have trouble reading it.

This goes in exactly the same category as every other use of Flash: ways to gratuitously make the web uglier, while at the same time also making it harder to use.

a real challenge

[CyberVenom]

Ok, so who wants to one-up this and write a full-featured text-rasterizer in pure JS?

I propose a JavaScript that can load a server-side TTF file (or OpenType or whatever) and walk the DOM, reading the CSS font name, and replacing the normal text with a rendering of the same in the specified CSS font, but rendered by the JavaScript instead of by the browser so it is gaurenteed to be done right. Of course, if the user has no JS, it will fall back to the CSS font names (which require the user have the font installed) and if the user has no CSS, it will fall back HTML 3.6 fonts.

The wheels in my head are already turning...

Oh, and before any of you leeches goes and patents it, I hereby declare prior art on the concept, so there!

Re:Png?

[WarpFlyght]

It's different because it degrades gracefully for text-only browsers and screen readers. As I recall, the JavaScript estimates the size of the headline based on your font settings and renders the headline accordingly, so people browsing with their font size at extra large aren't affected.

The only time it doesn't work for triple-sized fonts is if you adjust the font size while viewing the page. The JavaScript runs on page load, so you'd have to refresh to get the increased sizes to be reflected by the Flash headline.

Meh

[macshit]

I just checked out the website someone cited which uses this stuff, and ... well, maybe it's better than other attempts to do the same thing (like "put all text in a image"), but it's still pretty lame.

Like most other solutions to the "control-freak web designer problem", it seems better suited for a demo than for actual users. For instance, cut-n-pasting the text: it has some clunky emulation of cut-n-paste, but it's obviously an emulation, and doesn't integrate well with the environment. It also has the "flash capture" problem, where flash will grab mouse events you don't want it too -- e.g. if you're scrolling along with the mouse-wheel, and scroll past one of these dynamic font flash thingies, wham! your scrolling stops, as the flash instance grabs all the scroll events.

Morever, I think any technology which is being touted as a tool to give the designer more control over the fine details is a double-edged sword, as there are so many completely awful web-page "designers" out there, who are none-the-less still utter control freaks. If the technology in question still allows proper user control and overriding of the web-page, and integrates well with the user's environment (e.g.: css), then fine, but this "fonts as flash" stuff seems to be typically lacking in that regard (which is not surprising because flash itself is a major offender).

Disabled people use computers too :(

[applegoddess]

Honestly, I think this is an excellent use of JavaScript (and the whole reverting to good ol' CSS if javascript is disabled thing). It gives control of layout to the designer, but you can't forget the disabled users. They exist, just like you and me. I volunteer to help blind people, and you won't believe what a pain in the !@#$ jaws for windows, voiceover for OS X and speakup for linux are when it comes to surfing the web...all because some developer wanted to use some font he/she liked and implemented that by using flash or putting some stupid image as a replacement (and often forget to include the alt attribute, which noone seems to really use *frown*).

I can't thank people like the sIFR devs enough for trying to make peoples lives easier.

Done better with images

[jaques]

http://www.alistapart.com/articles/dynatext/

The above works better IMO as it uses plain old images to do the job (I dislike flash), plus the markup does need to inlcude these messy tags - it just uses the element text.

e.g.

<h1>Some Heading</h1> is auto-replaced by
<h1><img href="generated_url.png" /></h1>

where the generated img contains the text "Some Heading" in whatever font you use.

ok, so there's a performance hit, but images are cached, so its only for the first viewing. The real beauty of it is you just have to chance the text and not worry about the font! Magic