Flash completely dominates CSS/HTML/JS for rendering text accurately(ownedthx.com)
ownedthx.com
Flash completely dominates CSS/HTML/JS for rendering text accurately
http://www.ownedthx.com/blog/2009/04/27/flash-completely-dominates-csshtmljs-for-rendering-text-accurately/
15 comments
Adobe has done a lot of work to make Flash "accessible," if the artist is willing to put some effort into it. And, once you make it "accessible," search engines (at least Google) will be able to index it.
Safari/Mac (really, any web browser) is a horrible for typesetting.
If you need a whole document to be predictable typeset, please give me a PDF. If you don't need it to be typeset perfectly, please give me HTML.
Safari/Mac (really, any web browser) is a horrible for typesetting.
If you need a whole document to be predictable typeset, please give me a PDF. If you don't need it to be typeset perfectly, please give me HTML.
> Flash completely dominates CSS/HTML/JS for rendering text accurately
Except that the resulting rendering is an image so you can't copy and paste. I suppose some content providers will consider that a feature, but as a user it seems like a serious bug to me.
Except that the resulting rendering is an image so you can't copy and paste. I suppose some content providers will consider that a feature, but as a user it seems like a serious bug to me.
Actually that's no problem...
The SWF in the article were two snapshots that I overlayed, one from Flash, one from Word, so it has no interactivity with the curser.
Truth is, it's entirely possible to enable text selection, if that were a real demo of the text engine.
The SWF in the article were two snapshots that I overlayed, one from Flash, one from Word, so it has no interactivity with the curser.
Truth is, it's entirely possible to enable text selection, if that were a real demo of the text engine.
Then you failed to get your point across... Both of the demos you show may as well be images.
There's lots of other reasons not to use Flash, namely that its slow for lots of text, and it doesnt display anything at all on the iPhone and other mobile platforms. Using SIFR to replace headers is OK, but beyond that, I still hold that using Flash for text (on the web) is bad form.
There's lots of other reasons not to use Flash, namely that its slow for lots of text, and it doesnt display anything at all on the iPhone and other mobile platforms. Using SIFR to replace headers is OK, but beyond that, I still hold that using Flash for text (on the web) is bad form.
Why didn't you use a live demo?
Just the way it worked out. I had taken many screenshots along the way, but at the time I decided to write about my findings, I was in mid-refactor and had nothing that I could run.
In hindsight, I should have used the real deal.
In hindsight, I should have used the real deal.
sifr allows copy and paste fine. There is a problem with other browser-specific features though; the right-click options are provided by the flash app rather than the browser. (like firefox's "search in google")
There are a lot of cases where sifr doesn't allow copy and paste fine. Nowadays I run into it every day when I copy blog articles into Evernote. Depending how you do the text selection and what text you actually select, it doesn't work.
I will be glad when sifr is dead--hopefully it will be next year.
I will be glad when sifr is dead--hopefully it will be next year.
then its a problem with the developer or the fact that they're using an outdated sifr. the newest version of sifr does this fine
Three reasons to dislike Flash text. First, it does not look native. I have certain anti-aliasing settings, for example, and Flash text looks totally different. Second, copy-paste, as others have pointed out, is a problem --- yes, it can be done, but enough apps out there fail to enable it properly, so it does not really work. Third, if I have browser plugins which operate on text, they break.
> First, it does not look native
I don't think this point stands, or at least it doesn't in the way you think it does.
Flash has two text rendering modes: native, and embedded. Native uses the system API and follows your system options, like when deciding on how to antialias. Embedded uses the embedded fonts with the antialiasing method the developer chooses. Many developers pick the latter because they want to know exactly how text will work on all platforms.
It's up to the developer to select which method to use. And the new flash.text.engine.* API make both a lot more powerful.
> Second, copy-paste, as others have pointed out, is a problem (...) enough apps out there fail to enable it properly
Like the first one, this becomes a developer choice, not a platform problem. It's not that "it can be done", it's that it's easy. People who don't do it, don't do it because it's the option they've picked, not because it's difficult or anything.
Your third point totally stands as having a separate DOM kills the user's control over the content and its form. But point 1 and 2 are due to conscious developer decisions and not the technology.
I don't think this point stands, or at least it doesn't in the way you think it does.
Flash has two text rendering modes: native, and embedded. Native uses the system API and follows your system options, like when deciding on how to antialias. Embedded uses the embedded fonts with the antialiasing method the developer chooses. Many developers pick the latter because they want to know exactly how text will work on all platforms.
It's up to the developer to select which method to use. And the new flash.text.engine.* API make both a lot more powerful.
> Second, copy-paste, as others have pointed out, is a problem (...) enough apps out there fail to enable it properly
Like the first one, this becomes a developer choice, not a platform problem. It's not that "it can be done", it's that it's easy. People who don't do it, don't do it because it's the option they've picked, not because it's difficult or anything.
Your third point totally stands as having a separate DOM kills the user's control over the content and its form. But point 1 and 2 are due to conscious developer decisions and not the technology.
PNG dominates CSS/HTML/JS for rendering text accurately too.
I'd prefer something usable. Something that matches the rest of my apps, and something that used the font sizes and types that I specified (I set a minimum font size so I can read the test, for example). This doesn't do that.
I'd prefer something usable. Something that matches the rest of my apps, and something that used the font sizes and types that I specified (I set a minimum font size so I can read the test, for example). This doesn't do that.
Paper is better still...
Glad you like it. The new Text Layout Framework does a whole lot more too... it brings the classic Adobe digital-text expertise right into 98% of the world's current browsers.
Veronique Brossier has a good intro to it all: http://www.insideria.com/2009/03/flash-text-engine.html
More examples & info: http://labs.adobe.com/technologies/textlayout/
jd/adobe
Veronique Brossier has a good intro to it all: http://www.insideria.com/2009/03/flash-text-engine.html
More examples & info: http://labs.adobe.com/technologies/textlayout/
jd/adobe
CSS/HTML/JS can render fonts perfectly if you use <canvas/>. The copy/paste problem can be solved using the HTML5 drag and drop API. (copy=drag, paste=drop)
To make sure you have the exact font, you may want to include the font file with @font in CSS.
To make sure you have the exact font, you may want to include the font file with @font in CSS.
As soon as every major browser supports it, count me in :)
(and as soon as a good majority of folks are actually using those browser versions!)
(and as soon as a good majority of folks are actually using those browser versions!)
Internet Explorer has supported @font-face for over 11 years. You can embed SVG into the other browsers and/or use Canvas.
So I can use one of two different "standard" technologies, plus a proprietary technology, to avoid using a single proprietary technology.
I'm not sure where's the advantage.
I'm not sure where's the advantage.
So I'm supposed to be excited at the prospect of ditching open web standards in favor of embedding proprietary Word into proprietary Flash for minor aesthetic enhancements?
Moot. You can't even select/copy/paste it. Spiders can't crawl it. Users can't resize it so they can read it properly.
What? Sure you can--Flash is one of the only ways to reliably access the client clipboard. And if you're concerned about SEO of Flash content, display plain text to crawlers or read Adobe's SEO whitepapers: http://www.adobe.com/devnet/seo/
You can't even select/copy/paste it.
No? Then you're using it wrong. sIFR allows each of those features.
Spiders can't crawl it.
sIFR replaces text after the page has loaded. It appears no differently to spiders and search engines.
Users can't resize it so they can read it properly.
A valid concern, but it is likely fix-able. Assuming it hasn't been fixed already. I have no recent experience with this.
No? Then you're using it wrong. sIFR allows each of those features.
Spiders can't crawl it.
sIFR replaces text after the page has loaded. It appears no differently to spiders and search engines.
Users can't resize it so they can read it properly.
A valid concern, but it is likely fix-able. Assuming it hasn't been fixed already. I have no recent experience with this.
Gah. Again, as I posted up above, text selection is possible. going to update the post to indicate that...
So there is no difference from "native" browser text?
That's rubbish. You can't even select flash text + native text in the same selection. It's completely broken.
Also, flash bugs are platform specific. Like printing issues on firefox in linux, z-index issues on some browsers etc etc.
None of this happens with native text.
That's rubbish. You can't even select flash text + native text in the same selection. It's completely broken.
Also, flash bugs are platform specific. Like printing issues on firefox in linux, z-index issues on some browsers etc etc.
None of this happens with native text.
Here is what I always wondered about...we are now on Flash 10...why hasn't Adobe figured out a way to make Flash more native to the main browsers out there? How hard is it really for them to add the right click options that everyone in the world relies on?
Seriously a few lines of code(yeah exaggeration I know), is keeping them from pretty much domineering the interweb design.
Seriously a few lines of code(yeah exaggeration I know), is keeping them from pretty much domineering the interweb design.
We're asking the browser vendors to expose their right-click events to plugins, to provide an API to opening up in a new tab, to open up their cookie preferences so that plugins can integrate user choice, etc.
There's no need to reflexively push back against Flash. You can learn it. You're not left out. You can open up.
jd/adobe
There's no need to reflexively push back against Flash. You can learn it. You're not left out. You can open up.
jd/adobe
Wait, what? You're claming that Flash renders text accurately by comparing it to Word? If we're going to create a new typesetting system, can't we at least compare it to existing typesetting systems that have had some professional design input? I hesitate to drag out TeX, but come on - Adobe InDesign, Quark Xpress, even Mac OS X's built-in CoreText/ATSUI rendering probably pays more attention to text layout and spacing than Word does.
I know Firefox's rendering engine put some effort into supporting the underlying platform's high-quality text-layout engine (for instance, Firefox will often use the 'fi' ligature if it's available), and this will only get better with time - unlike Flash, which will now have to maintain their exact layout system forever to maintain backwards compatibility.
I know Firefox's rendering engine put some effort into supporting the underlying platform's high-quality text-layout engine (for instance, Firefox will often use the 'fi' ligature if it's available), and this will only get better with time - unlike Flash, which will now have to maintain their exact layout system forever to maintain backwards compatibility.
I'd LOVE to see browsers support typographically correct hyphenation, it'd make narrow columns of text look sooo much better.
I've seen uneven kerning in a lot of flash apps.
This problems occurs mostly on Mac OS X, with dynamic text fields (text input, when the font is not embedded) : http://kb.adobe.com/selfservice/viewContent.do?externalId=f0...
Ah, ok. That's what I was hoping. As a mac user myself, I can confirm that flash.text.engine has excellent, perhaps perfect kerning.
Really? Have you seen it with the new flash.text.engine API? Or just other forms of text in Flash?
This approach for text rendering should really only be used if there were some sort of graceful failover whereby another browser, lacking flash, would receive the text rendered as standard HTML. It would be foolish to use it otherwise.
There's absolutely no need for that trolling headline. What would have been wrong with "Flash enables perfect replication of Word's layout engine online"? Truthful and probably more interesting.
The Flash doesn't work on that page for me, and it works on every other page I've been to this month.
Why I don't like Flash.
Why I don't like Flash.
[deleted](2)
Besides the copy/paste argument that people have already mentioned (yes, I know there is a "solution"). It's also inaccessible, takes longer to render and relies on a 3rd party product to render your website how you intended.
I know you'll probably say "give search engines and accessible-concerned folks a text version", but who honestly wants to maintain two different sets of code for ALL body content? And all just so the text looks a little better? Why not just tell everybody to use Safari/Mac?