Media sample: TLF text formatting using CSS
Requirements
Text Layout Framework (TLF) text fields do not support cascading style sheets (CSS) by default but can support CSS formatting using a custom-built format resolver class. A format resolver is a style parser that you can assign to a TLF text field to support CSS or similar "based-on" styling formats. Once a format resolver is applied to a TLF text field, you can use CSS to format the text field in much the same way you would a Classic text field. Additionally, you can use CSS to format any TLF markup text supplied to a TLF text field.
This sample contains two parts, each showing how to implement a format resolver to recreate the Classic text sample with a TLF text field. The first part demonstrates how to use an external CSS file to format HTML text applied to a TLF text field:
The second part demonstrates how to accomplish the same task using TLF markup instead of HTML text:
Take a look at helloworld.css file, the helloworld.xml file, the CSSFormatResolver class, as well as the ActionScript code to see how everything fits together.
TLF tips
- Be sure to embed all the fonts defined in your style sheet so that you can see the formatting work as expected. For example, if you'd like to be able to use any combination of Arial regular, bold, and italic, you need to embed Arial regular, Arial bold, Arial italic, and Arial bold italic in the FLA file.
- TLF text fields interpret HTML formatting somewhat differently than Classic text fields. For example, an H1 tag in a TLF text field is interpreted as a span tag. For best results, use a span tag with CSS class selectors to represent any tags other than those supported in the TLF.
- When using the
tlfMarkupproperty to assign markup to a TLF text field, be sure to assign the markup as a String instead of XML to avoid applying unintended formatting to the field.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Component sample: Video player
- Component sample: Customized buttons
- Drawing sample: Coordinate space, radians, and degrees
- Drawing sample: Movie clip nesting
- Drawing sample: Drawing API
- Drawing sample: Color transformations
- Drawing sample: 3D rotation
- Game sample: Maze
- Game sample: Amoebae
- Interactivity sample: Slider-controlled movement
