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!
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
(Adobe Systems Inc.)
[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):
|Anchor tag||The <a> tag creates a hypertext link and supports the following attributes: |
|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: |
|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:
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: |
|Span tag||The <span> tag is available but supports no attributes. |
|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:
Note: Unlike the TextField class, the following attributes are unsupported: blockindent, leading, and tabstops.
|Underline tag||The <u> tag underlines the tagged text.|
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:
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?
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.
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.
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.
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...
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 <font/> 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.
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?
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.
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.
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 !
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
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.
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!