22 Replies Latest reply on Jan 5, 2011 2:57 PM by robin.briggs

    HTML text and CSS support in AS3 project

    timoisalive Level 1



      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!



        • 1. Re: HTML text and CSS support in AS3 project
          Abhishek.G Level 4



          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.)

          1 person found this helpful
          • 2. Re: HTML text and CSS support in AS3 project
            Abhishek.G Level 4

            [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 tagThe <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 tagThe <b> tag renders text as bold. A bold typeface must be available for the font used.
            Break tagThe <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 tagThe <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 tagThe <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 tagThe <i> tag displays the tagged text in italics. An italic typeface must be available  for the font used.
            List item tagNote: Unlike the TextField class, the List item tag is not supported.
            Paragraph tagThe <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 tagThe <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 tagThe <u> tag underlines the tagged text.
            1 person found this helpful
            • 3. Re: HTML text and CSS support in AS3 project
              timoisalive Level 1



              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">
                  <span styleName="mystyle">Header</span>
                   <a href="http://www.google.com">Link Label</a>


              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,



              • 4. Re: HTML text and CSS support in AS3 project
                timoisalive Level 1

                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.





                • 5. Re: HTML text and CSS support in AS3 project
                  timoisalive Level 1

                  And let's try the attachment again...

                  • 6. Re: HTML text and CSS support in AS3 project
                    timoisalive Level 1

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

                    • 7. Re: HTML text and CSS support in AS3 project



                      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

                      • 8. Re: HTML text and CSS support in AS3 project

                        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.

                        • 9. Re: HTML text and CSS support in AS3 project

                          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.

                          • 10. Re: HTML text and CSS support in AS3 project
                            bustback Level 1

                            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...

                            • 11. Re: HTML text and CSS support in AS3 project
                              mfittko1982 Level 1

                              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?

                              • 12. Re: DENG and TLF
                                mfittko1982 Level 1

                                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.

                                • 13. Re: DENG and TLF
                                  rdermer Adobe Employee

                                  Your argument makes 100% sense to me.



                                  • 14. Re: DENG and TLF
                                    FM_Flame Level 1

                                    I totaly agree with you too!

                                    • 15. Re: DENG and TLF
                                      Baz (thinkLOOP)

                                      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.

                                      • 16. Re: DENG and TLF
                                        FM_Flame Level 1

                                        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 !

                                        • 17. Re: DENG and TLF
                                          robin.briggs Adobe Employee



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


                                          - robin

                                          • 18. Re: DENG and TLF
                                            dgeurts11 Level 1

                                            Oh kewl, the new stuff looks promising, thanks !

                                            • 19. TLF fontThickness and fontSharpness
                                              FM_Flame Level 1

                                              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

                                              • 20. Re: TLF fontThickness and fontSharpness
                                                robin.briggs Adobe Employee

                                                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.




                                                - robin

                                                • 21. Re: TLF fontThickness and fontSharpness
                                                  FM_Flame Level 1



                                                  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!

                                                  • 22. Re: TLF fontThickness and fontSharpness
                                                    robin.briggs Adobe Employee

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




                                                    - robin