HTML text and CSS support in AS3 project

Report · Aug 18, 2009

Hi,

I'm trying to to accomplish a multicolumn text (selectable, but non-editable) with simple html/css formatting (with a, b, h1 and span tags) in a Gumbo AS3 project. I'm loading the html text and css styles from external files.

Currently I'm using the CSSFormatResolver class from the SimpleEditorWithCSS example, with modifications to work without Flex specific classes. It works somehow, but not completely. Some of the styles from my css get applied to the paragraphs (font style and color for example), but some not (for example columnCount). For links (a tags) I'm not able to apply styles, and special styles (marked with span tag and styleName attribute) work depending on how I'm importing the text (TEXT_LAYOUT_FORMAT seems to work, HTML_FORMAT doesn't).

Are this kind of features supported in TLF at the moment, and if they are, what would be the easiest way to use them? Should I be able to import html text as it is, or should I parse it and import in text layout format? Is there a reference somewhere of which kind of markup should work with different formats to enable styles?

I didn't think that my scenario would be so rare, but somehow it seems really difficult on finding any simple examples in the very traditional htmltext/css setup...

Thanks for any ideas!

-Timo

Report · Aug 18, 2009

Hi,

HTML_FORMAT is very basic; it is modeled on (and is a subset of) the HTML capabilities of TextField. I'm attaching a document outlining what is/isn't supported by this format. Specifically, styleName isn't.

TEXT_LAYOUT_FORMAT is more comprehensive.

Hope this helps

Abhishek

(Adobe Systems Inc.)

Report · Aug 18, 2009

[I am not sure if the attachment will go through, so I am copying the contents here]

HTML format. Use this for importing from, or exporting to, a TextFlow using the HTML fomat. The Text Layout Framework HTML supports a subset of the tags and attributes supported by the TextField class in the flash.text package.

The following table lists the HTML tags and attributes supported for the import and export process (tags and attributes supported by TextField, but not supported by the Text Layout Framework are specifically described as not supported):

Tag	Description
Anchor tag	The <a> tag creates a hypertext link and supports the following attributes: target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window. href: Specifies a URL. The URL can be either absolute or relative to the location of the SWF file that is loading the page. An example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs. Note: Unlike the TextField class, ActionScript link events are not supported. Neither are a:link, a:hover, and a:active styles.
Bold tag	The <b> tag renders text as bold. A bold typeface must be available for the font used.
Break tag	The <br> tag creates a line break in the text field. Set the text field to be a multiline text field to use this tag.
Font tag	The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes: color: Only hexadecimal color (#FFFFFF) values are supported. face: Specifies the name of the font to use. As shown in the following example, you can specify a list of comma-delimited font names, in which case Flash Player selects the first available font. If the specified font is not installed on the local computer system or isn't embedded in the SWF file, Flash Player selects a substitute font. size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18. Note: Unlike the TextField class, you cannot use relative point sizes, such as +2 or -4.
Image tag	The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. You must set the text field to be multiline to wrap text around an image. The <img> tag supports the following attributes: src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely. width: The width of the image, SWF file, or movie clip being inserted, in pixels. height: The height of the image, SWF file, or movie clip being inserted, in pixels. align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left. Note: Unlike the TextField class, the following attributes are not supported: hspace, vspace, id, and checkPolicyFile. Flash displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the <img> tag height and width attributes. In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field.
Italic tag	The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
List item tag	Note: Unlike the TextField class, the List item tag is not supported.
Paragraph tag	The <p> tag creates a new paragraph. The text field must be set to be a multiline text field to use this tag. The <p> tag supports the following attributes: align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center. Note: Unlike the TextField class, the class attribute is not supported.
Span tag	The <span> tag is available but supports no attributes. Note: Unlike the TextField class, the class is not supported.
Text format tag	The <textformat> tag lets you use a subset of paragraph formatting properties of the TextFormat class within text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags. The <textformat> tag has the following attributes: indent: Specifies the indentation from the left margin to the first character in the paragraph; corresponds to TextFormat.indent. Both positive and negative numbers are acceptable. leftmargin: Specifies the left margin of the paragraph, in points; corresponds /* to TextFormat.leftMargin. rightmargin: Specifies the right margin of the paragraph, in points; corresponds to TextFormat.rightMargin. Note: Unlike the TextField class, the following attributes are unsupported: blockindent, leading, and tabstops.
Underline tag	The <u> tag underlines the tagged text.

Report · Aug 18, 2009

Abhishek,

thanks for this info.

Have I understood correct, that when using HTML_FORMAT for importing the text, I am not able to define any special formatting for headers or subheaders (by setting css styles for h1/h2 tag or span class attribute) or link hovering (a:hover style)?

In this case using the TEXT_LAYOUT_FORMAT seems like the only possible choice to go for.

My imported text looks like following:

<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">

Header
<a href="http://www.google.com">Link Label</a>

</TextFlow>

I'm able to get the span with "mystyle" formatting as defined in css, but for the anchor tag I get the default blue underlined formatting, unlike what my css says. How should I be able to define the anchor formatting, and further the anchor hover states?

Thanks again,

-Timo

Report · Aug 19, 2009

Ok, I found the solutions by further modifying the CSSFormatResolver class. It is now able to find the styles a, a:hover and a:active, (in addition to the custom styles given in styleName attributes) from a stylesheet and render them correct.

I'm attaching the modified CSSFormatResolver class in case someone's interested.

Cheers!

-Timo

Report · Aug 19, 2009

And let's try the attachment again...

Report · Aug 19, 2009

Hmm how am I supposed to be able to upload a file, it only gives errors....

Report · Sep 01, 2009

Hello,

I have found an issue related to the above version of the CSSFormatResolver class.

It is posted in this thread.

Message was edited by: H_mike

Report · Nov 24, 2009

In my opinion this topic is such a terrible mistake in the TLF, what is the point of a better text engine that cant even display dynamic Html text tied to a style sheet? the format Resolver is a good option for what about 10% of developers out there? I guarentee if flex 4 doesnt release with a better solution then writing your own format resolver a lot of people wanting to display text from an editor like CKEditor will be very upset and let down.

Report · May 10, 2010

You are absolutely right. Lack of decent HTML/CSS support in combination with the TLF is such a huge letdown, that many more Flash developers will switch to HTML5 (if they haven't already), because it is just so frustrating that adobe is not able to bring standards-based text display to Flash.

If Adobe will not present a solution to this problem soon, I will continue my RIA development using different standards-based approaches ASAP.

Report · May 10, 2010

TLF is a framework (Text Layout Framework). It's not a specification or a standard. You have full control to develop any extension you want to support any and all of the HTML/CSS specification if you choose to. There is some example information available on how to use CSS within TLF and also some information on how to support additional rendering techniques that HTML can use (bullets, lists, etc.).

Standards-based text display is a misnomer. If you want the full spec and want to be able to do what HTML/CSS can do in Flash, then that's likely a Flash Player team issue and not a TLF issue. TLF is an actionscript library and it is not likely there will be parity between HTML/CSS within TLF for a long time. It's not a performant way of doing things. If you want comparable performance and support, then Adobe will need to, literally, build in an HTML/CSS engine into the Flash Player. Actionscript is not an appropriate place to do that.

Vote for it on the Adobe Ideas site if you feel strongly about it.

For now, TLF gives you much more fundamental control over your typography than HTML/CSS will. Sure it doesn't support all of the capabilities of two completely separate specifications (HTML and CSS). That's why it's a framework.

You could always go look at DENG and port that over to use TLF if you wanted...

Report · May 10, 2010

Ok, my point was not to critisise the TLF-framework as such. But it seems odd, that the adobe flash team does not offer a simple-to-use way to interpret a minimal set of standards-compliant HTML and CSS. There is no default solution for adding standards-compliant css to an external HTML source. Instead, the only default way to add style information to HTML content that is displayed in Flash – and I am not talking about full-blown JS/HTML websites – is to use the HISTORIC tag. You cannot use the "style"-attribute at all... this is embarrassing, dudes!

On the other hand, if you would like to add CSS style information to ActionScript, you will need to provide pre-compiled css stylesheet information. If you would like to add CSS styles dynamically, you would need to write your own css parser if you do not have inline styles. And if you'd have inline standards-compliant CSS styles, you would have to translate them into the non-standards compliant lowerCamelCase CSS dialect of ActionScript.

LOL!

If you would like to include an HTML component within flash, for example, you either have to display an iframe above the flash player content or you would have to deal with the import of XHTML content into the Flash DisplayObject tree. Surely there is a way to do that, and surely I can "just" build an actinscript component that will be able to accomplish that. But would'nt it be comfortable for the developers to simply load XHTML via an XML data provider and just add some minor adjustments to the CSS interpreter to display a minimum set of ECMA standards-compliant content?

Report · May 10, 2010

By the way... Thank you for the DENG hint (http://deng.com.br) – I will try to use that to build a minimal AS3 version of it, but I guess it is a major task for a single developer to port that from AS1 to AS3.

Though DENG might be a possible starting point to build a custon solution to this problem it seems to be symptomitic for Adobe that they do not head into the direction of standards-compliance when it comes to the support of HTML as a data provider for more or less rich content, not to speak of common CSS as a style data provider. You need to do it on your own, and this is frustrating. Really frustrating.

I believe any ActionScript developer out there who has worked with the good old TextArea component and the htmlString property has struggled with the very limited HTML support, which effectively has not been improved since more than half a decade, which is quite a long time in the internet age, insn't it?

TLF is a very decent approach to leverage the benifits of Flash for text display in comparison with the web browser engines. But I am sure that Adobe will need to provide a much more simple interface for standards-based web content ASAP if they would like the developers to actually use the TLF for the display of such content!

Since there is still not an easy way to use even simple HTML/CSS data in Flash I am convinced that many developers will "switch" to HTML5/JS instead of TLF/AS3 as soon as there are good JS libraries out there which can do all the stuff that Flash can. And all the work which has been put into the development of the TLF has been wasted, because you will not be able to change the world and make the people use TLF markup instead of HTML

So please Adobe, please include your "users" (the developers) into your decisions and provide a fool-proof interface for using BASIC (!!!) XHTML data within Flash text components which ought to be used in combination with the TLF.

Report · May 10, 2010

Your argument makes 100% sense to me.

Richard

Report · May 21, 2010

I totaly agree with you too!

Report · Sep 23, 2010

How come you're not angry that browsers don't render ActionScript?

The biggest software company in the world (Microsoft) has dedicated an entire department (IE) for over decade, simply to tackle the task of rendering HTML - and they are BARELY getting it right even today.

Firefox is a huge open source effort with hundreds of developers aimed solely at rendering HTML.

Other contenders also happen to be the biggest software shops in the world (Google, Apple).

Even the "simple" stuff isn't that simple.

Just saying.

Report · Sep 23, 2010

As far as I've read in the TLF Blog, cascade lists and text wrapping around image will be possible in TLF v.2 which will be available officially in the next CS release which is great enough for me! If they only make so we can control thickness sharpness of the text.. that would totally mean goodbye old text fields, welcome TLF 🙂 Can't wait for TLF v.2, really !

Report · Sep 23, 2010

Thanks!

If you want to get a preview look at TLF 2, see our SourceForge project - http://sourceforge.net/adobe/tlf/home/.

- robin

Report · Sep 24, 2010

Oh kewl, the new stuff looks promising, thanks !

Report · Dec 29, 2010

Hi, I've been looking around to see if there will be fontThickness and Sharpess or maybe Photoshops antialiasing like strong chrisp smooth in the new TLF that's about to go live soon with the Flex Hero, but I couldn't find anywhere.

I also couldn't find a feature request about that. Is there one?

That's very important feature for me, if someone can let me know, would be great, if noone does I will post a feature request in a few days to make sure and post the link here for you guys to vote

Report · Jan 05, 2011

Rendering is improved in the latest Player. There will be linear blending, better subpixel rendering, and improved hinting. The hinting improvements will get picked up by all SWFs, the other two will require you to mark the SWF as a Player 10.2 SWF. There is a beta version of the new Player on our labs site, http://labs.adobe.com/technologies/flashplayer10/.

The old fontThickness and fontSharpness controls are not part of this, however. Please take a look at the new rendering, and let us know how you like it. There's a forum that goes with the new beta that would be a perfect place for this discussion.

Thanks,

- robin

Report · Jan 05, 2011

http://forums.adobe.com/thread/773783

Here's the topic, thanks for the advice.

I don't have to try out the new rendering now, I am sure I will like it! But this doesn't change the fact that I need photoshoplike anti-aliasing: smooth, strong, chripst, not just 1 rendering. I've explained more in detail in the topic, check it out. Thanks!

Report · Jan 05, 2011

I have forwarded your comments on to the folks who do the font rendering.

Thanks!

- robin