Skip to main content
D
daring_Odyssey15A8
Known Participant
August 18, 2009
Question

HTML text and CSS support in AS3 project

  • August 18, 2009
  • 3 replies
  • 35754 views

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

This topic has been closed for replies.

3 replies

D
dgeurts11
New Participant
November 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.

M
mfittko1982
Participating Frequently
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.

B
bustback
Participating Frequently
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...

H
H_mike1
New Participant
September 1, 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

A
Abhi.G.
Participating Frequently
August 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.)

A
Abhi.G.
Participating Frequently
August 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 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.
D
daring_Odyssey15A8Author
Known Participant
August 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">
  <p>
    <span styleName="mystyle">Header</span>
     <a href="http://www.google.com">Link Label</a>
  </p>
</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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices