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."
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.
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.
Karma: Chameleon (mostly due to the fact that you come and go).
sIFR has been around for ages now! Why is it only just making it onto here and being touted as "finally" being here?
(That is, if this isn't a dupe from something months ago).
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.
"Aye, and if my grandmother had wheels, she'd be a wagon!" -- Montgomery Scott, ST:III
And how is this different then just sending a png with the text. I guess it could then be dynamically sized -- but somehow I think that even Flash will have a hard time figuring out if I like my fonts triple sized.
badness 10000
After reading the fsking article, this is a technology intended mostly for doing headlines and things with flash. Fed apperently by javascript variables, the flash components render the requested text. OMFG, it's a revival of the old-skool Java headline scrollers, minus the scrolling... bleh.
I patiently await the next article.
"Play is the only way the highest intelligence of humankind can unfold." -- Joseph Chilton Pearce
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...
Can screen readers and the ilk handle this stuff? Also doesn't it kinda give a big FU to my userContent.css font settings?
Why not fork?
Meh, nothing to see here.
I hacked up this solution to auto-generate 'pretty' page titles for CMS-driven websites *many* years ago. Mine didn't require Javascript.
Course, I didn't give it a spiffy name, apply for a patent and file a press release on discovering the obvious.
Option 1:
Step 1:
Embed font in question in sized Flash title block area, create variable text field named titletext
Step 2:
Embed Flash applet in page, and add titletext=whatever into your embed and object code. Whatever being the current page's title, etc, pulled from CMS.
The cool part about this is that the flash title block is *tiny* and remains in cache.
Option 2 (server-intensive):
Have the server generate ImageMagick-based gif or jpg titles after uploading your fonts to the server.
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!
I find the SVG approach more interesting because it's an open solution (well, except for the various viewer implementations at the moment). I don't necessarily see how the Batik viewer comes into this though, because their sample font demos work just fine in the Adobe viewer also.
This technology is interesting way beyond just the web. It could be used by organizations that require a consistent platform-independent representation of critical documents. Currently PDF is often the choice for that sort of thing, and probably will be for a while because it is mature in both display and printing. But having SVG become a viable option together with better viewers, or even browser-integrated SVG capabilities, can only be a good thing in the long run.
Could this be used to mask email addresses from email address harvesters?
No, because the text remains in the HTML file.
"Aye, and if my grandmother had wheels, she'd be a wagon!" -- Montgomery Scott, ST:III
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).
We live, as we dream -- alone....
I'm consistently impressed at the amount of effort poured into seemingly trivial hacks - not in the difficulty or complexity of the hack, but in it's shallow utility.
Either people are paying web "designers" to do a whole lot of nothing, or there is some screaming need that really calls for IETF/W3C to fix this properly.
It's 10 PM. Do you know if you're un-American?
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.
I guess this is good, except I'm running flash click to play in Firefox, and have JavaScript pretty pared down.
Me too -- and it sure plays hell with sIFR. It detects that I don't have Flash activated, so it displays the CSS-rendered text. Then I click the Flash box and see the sIFR-rendered text, also.
Personally, I don't think it's the fix to browser fonts. Clever hack, yes. Solution, no.
I do have the feeling we're not far off, though. Actually, here's one way you could do it -- generate a gif for each word, with the "alt" tag being the actual text. Then highlighting works, cut and paste works (cut and paste the Right/Left graphics from Yahoo driving directions if you don't believe me)... it's just slow to load the page and render, and the user is screwed if they want to resize or set their own stylesheet.
I feel like there are a lot of pieces lying around, but no full solution yet. We may just need universally-supported, load/render on-the-fly fonts... someday.
It obviously didn't occur to the sIFR people to test this "solution" in Firefox with the Flashblock extension installed. Why am I not surprised?
it obviously didn't occur to you to test your "theory" in Firefox with the Flashblock extension installed. Why am I not surprised?
How is that different than using JavaScript to put together a bunch of PNG images (one per letter) for each title?
Anyway, the older technologies seem much better, and/or using some form of SVG + JavaScript. Flash is zombie technology -- it's dead, but people use it anyway.
Don't thank God, thank a doctor!
The examples look awful if you have adblock enabled!
"The newly born animals are then whisked off for a quick run through a giant baking oven." --heard on Food Network
I get enough e-mails at work (in Outlook, so I can't actually override this) which use Comic Sans, 14 point, purple-on-yellow, without the web designers being able to force this on me as well!
(I know I can turn it off; I'm just ranting.)
Sean Ellis
Follow OfQuack's antics on Twitter.
In flash you can embedd the font anyway.... this is a bastard child solution.
Use flash, or don't. Otherwise the existing 'problem' isn't a problem, I have installed the fonts I want, use them.
Browsers could have a font api... but can you imagine the design travesties?
eurgh!
#hostfile 0.0.0.0 primidi.com 0.0.0.0 www.primidi.com 0.0.0.0 radio.weblogs.com
I was going to raise the accessibility issue, but you beat me to it.
One of the problems with using images for text is that it makes it very difficult to render properly in a non-visual browser. Even with alt tags, you don't have the usual accessibility-friendly CSS to indicate whether things should be read normally, spelt out (as for abbreviations), etc.
It would be nice if a future (X)HTML standard could provide a slightly more general "accessible alternative" for non-text data, be it images or embedded content like Flash. At least then those who are visually impaired would have a fighting chance of understanding the content. In the meantime, I'll take an approach that at least degrades gracefully because the text is in there somewhere.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
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.
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
Jaques
I would personally say this kind of thing is exactly the purpose for SVG. I also believe that change and innovation has to come from drive either in the web browser or on popular web pages. I don't mind upgrading my web browser for enhanced features... thats intuitive really.
So hopefully, new versions of web browsers (IE) will have proper SVG support, and web designers will adopt SVG - as opposed to Flash, as I believe Flash should be more of a peripheral function (along with Java applets), rather than core functionality.
I see it as pointless. In case everyone's forgot. TT Fonts are splines with hinting. Send the fonts needed, and let the client handle it.
I mean as a corporation, not the products. The problem is precisely that the products they dominate with cruel, calculated precision are precisely the ones that should be open.
They leverage their core SVG position into educational markets and they're probably the one reason major reason that American education is the last place on earth you're ever going to see open source. It will happen eventually, but that will be the last bastion of closed source and that is not only ironic but a sad condemnation of American values.