Adobe® Flex® 4 Language Reference
Show Packages and Classes List |  Packages  |  Classes  |  Index  |  Appendixes
flash.text 
StyleSheet 
Packageflash.text
Classpublic dynamic class StyleSheet
InheritanceStyleSheet Inheritance EventDispatcher Inheritance Object

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

The StyleSheet class lets you create a StyleSheet object that contains text formatting rules for font size, color, and other styles. You can then apply styles defined by a style sheet to a TextField object that contains HTML- or XML-formatted text. The text in the TextField object is automatically formatted according to the tag styles defined by the StyleSheet object. You can use text styles to define new formatting tags, redefine built-in HTML tags, or create style classes that you can apply to certain HTML tags.

To apply styles to a TextField object, assign the StyleSheet object to a TextField object's styleSheet property.

Note: A text field with a style sheet is not editable. In other words, a text field with the type property set to TextFieldType.INPUT applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.

Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet (CSS) properties and values, as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)

CSS propertyActionScript propertyUsage and supported values
color color Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.
display display Supported values are inline, block, and none.
font-family fontFamily A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.
font-size fontSize Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
font-style fontStyle Recognized values are normal and italic.
font-weight fontWeight Recognized values are normal and bold.
kerning kerning Recognized values are true and false. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning. The kerning property is only supported in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies.
leading leading The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
letter-spacing letterSpacing The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
margin-left marginLeft Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
margin-right marginRight Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
text-align textAlign Recognized values are left, center, right, and justify.
text-decoration textDecoration Recognized values are none and underline.
text-indent textIndent Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

You can use the StyleSheet class to perform low-level text rendering. However, in Flex, you typically use the Label, Text, TextArea, and TextInput controls to process text.

View the examples

See also



Public Properties
 PropertyDefined By
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
 Inheritedprototype : Object
[static] A reference to the prototype object of a class or function object.
Object
  styleNames : Array
[read-only] An array that contains the names (as strings) of all of the styles registered in this style sheet.
StyleSheet
Public Methods
 MethodDefined By
  
Creates a new StyleSheet object.
StyleSheet
 Inherited
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.
EventDispatcher
  
Removes all styles from the style sheet object.
StyleSheet
 Inherited
Dispatches an event into the event flow.
EventDispatcher
  
Returns a copy of the style object associated with the style named styleName.
StyleSheet
 Inherited
Checks whether the EventDispatcher object has any listeners registered for a specific type of event.
EventDispatcher
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
  
Parses the CSS in CSSText and loads the style sheet with it.
StyleSheet
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
Removes a listener from the EventDispatcher object.
EventDispatcher
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
  
setStyle(styleName:String, styleObject:Object):void
Adds a new style with the specified name to the style sheet object.
StyleSheet
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
  
Extends the CSS parsing capability.
StyleSheet
 Inherited
Returns the primitive value of the specified object.
Object
 Inherited
Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type.
EventDispatcher
Events
 Event Summary Defined By
 Inherited[broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active.EventDispatcher
 Inherited[broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive.EventDispatcher
Property Detail

styleNames

property
styleNames:Array  [read-only]

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

An array that contains the names (as strings) of all of the styles registered in this style sheet.



Implementation
    public function get styleNames():Array
Constructor Detail

StyleSheet

()Constructor
public function StyleSheet()

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Creates a new StyleSheet object.

See also

Method Detail

clear

()method
public function clear():void

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Removes all styles from the style sheet object.

getStyle

()method 
public function getStyle(styleName:String):Object

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Returns a copy of the style object associated with the style named styleName. If there is no style object associated with styleName, null is returned.

Parameters

styleName:String — A string that specifies the name of the style to retrieve.

Returns
Object — An object.

See also


Example
How to use this example
Please see the parseCSS() or transform() method's example for illustrations of how to use the getStyle() method.

parseCSS

()method 
public function parseCSS(CSSText:String):void

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Parses the CSS in CSSText and loads the style sheet with it. If a style in CSSText is already in styleSheet, the properties in styleSheet are retained, and only the ones in CSSText are added or changed in styleSheet.

To extend the native CSS parsing capability, you can override this method by creating a subclass of the StyleSheet class.

Parameters

CSSText:String — The CSS text to parse (a string).


Example  ( How to use this example )

In the following example, when a user clicks on the text file, CSS styles, loaded from a file, are applied to the content.

In the constructor, a multiline text field is created and its content is set to an HTML-formatted string. (The HTML heading and span tags are not rendered before CSS style is applied.) A URLRequest object is created to identify the location of the CSS file; for this example, the CSS file is in the same directory as the SWF file. The file is loaded with a URLLoader object. There are two event listeners added for the loader URLLoader object. If an IO error occurs, the errorHandler() method is invoked, which displays an error message in the text field. After all the data is received and placed in the data property of the loader URLLoader object, the loaderCompleteHandler() method is invoked. This method parses the CSS styles from the data loaded from the file and fills the sheet StyleSheet object with the style definitions.

When the user clicks on the text field, the clickHandler() method is called. The if statement in the clickHandler() method checks to make sure the file loading was finished before applying the style sheet to the text field. In order for the style sheet to take effect, the htmlText property must be reassigned with the content after the style sheet is assigned to the text field. The CSS font-family and the color property values for the heading tag also are appended to the content of the text field. (The values of these properties will be "undefined" if style sheet values are not in effect.)

The following is an example of a content of the CSS file that can be used with this example. Before running this example, create a text file, copy the following CSS content into it, then save it with the file name test.css and place it in the same directory as the SWF file.

   p {
      font-family: Times New Roman, Times, _serif;
      font-size: 14;
       font-Style: italic;
        margin-left: 10;  
   }
   h1 {
      font-family: Arial, Helvetica, _sans;
      font-size: 20;
      font-weight: bold;
   }
   .bluetext {
      color: #0000CC;
   }
 
package {
    import flash.display.Sprite;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.events.IOErrorEvent;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class StyleSheet_parseCSSExample extends Sprite {
        private var loader:URLLoader = new URLLoader();
        private var field:TextField = new TextField();
        private var exampleText:String = "<h1>This is a headline</h1>"
                    + "<p>This is a line of text. <span class='bluetext'>" 
                    + "This line of text is colored blue.</span></p>";
        private var sheet:StyleSheet = new StyleSheet();
        private var cssReady:Boolean = false;

        public function StyleSheet_parseCSSExample() {
            field.x = 10;
            field.y = 10;
            field.background = true;
            field.multiline = true;
            field.autoSize = TextFieldAutoSize.LEFT;
            field.htmlText = exampleText;

            field.addEventListener(MouseEvent.CLICK, clickHandler);
            
            addChild(field);
            
            var req:URLRequest = new URLRequest("test.css");
            loader.load(req);

            loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
            loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
        }

        public function errorHandler(e:IOErrorEvent):void {
            field.htmlText = "Couldn't load the style sheet file.";
        }

        public function loaderCompleteHandler(event:Event):void {
            sheet.parseCSS(loader.data);
            cssReady = true;
        }

        public function clickHandler(e:MouseEvent):void {

            if (cssReady) {
                field.styleSheet = sheet;
                field.htmlText = exampleText;
                
                var style:Object = sheet.getStyle("h1");
                field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>";
                field.htmlText += "<p>Headline color is: " + style.color + "</p>";  

            } else {
                field.htmlText = "Couldn't apply the CSS styles.";
            }
        }
    }
}

setStyle

()method 
public function setStyle(styleName:String, styleObject:Object):void

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Adds a new style with the specified name to the style sheet object. If the named style does not already exist in the style sheet, it is added. If the named style already exists in the style sheet, it is replaced. If the styleObject parameter is null, the named style is removed.

Flash Player creates a copy of the style object that you pass to this method.

For a list of supported styles, see the table in the description for the StyleSheet class.

Parameters

styleName:String — A string that specifies the name of the style to add to the style sheet.
 
styleObject:Object — An object that describes the style, or null.

transform

()method 
public function transform(formatObject:Object):flash.text:TextFormat

Language Version: ActionScript 3.0
Runtime Versions: AIR 1.0 Flash Player 9, Flash Lite 4

Extends the CSS parsing capability. Advanced developers can override this method by extending the StyleSheet class.

Parameters

formatObject:Object — An object that describes the style, containing style rules as properties of the object, or null.

Returns
flash.text:TextFormat — A TextFormat object containing the result of the mapping of CSS rules to text format properties.

See also


Example  ( How to use this example )

This example uses the transform() method to apply a style from a CSS file to a TextFormat object for a text field.

CSS styles are used usually to format HTML content. However, by using transform() method of a StyleSheet object, specific CSS styles can be assigned to a TextFormat object and then applied to any text field.

The URLRequest and URLLoader objects are used to load the CSS file. An event listener is added for the Event.COMPLETE event, which occurs after all the data is received and placed in the data property of the loader URLLoader object. The loaderCompleteHandler() method then parses the CSS from the data loaded from the file and fills the sheet StyleSheet object with the styles. The getStyle() method of the style sheet retrieves the HTML paragraph styles, which are then assigned to the cssFormat TextFormat object by using style sheet's transform() method. Finally, the default text format of the inputField text field is set to the new cssFormat text format.

package {
    import flash.display.Sprite;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldType;
    import flash.events.IOErrorEvent;
    import flash.events.Event;

    public class StyleSheet_transformExample extends Sprite {
        private var loader:URLLoader = new URLLoader();
        private var inputField:TextField = new TextField();
        private var sheet:StyleSheet = new StyleSheet();

        public function StyleSheet_transformExample() {
            inputField.x = 10;
            inputField.y = 10;
            inputField.background = true;
            inputField.width = 300;
            inputField.height = 200;
            inputField.wordWrap = true;
            inputField.multiline = true;    
            inputField.type = TextFieldType.INPUT;

            addChild(inputField);
            
            var req:URLRequest = new URLRequest("test.css");
            loader.load(req);

            loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
            loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
        }

        public function errorHandler(e:IOErrorEvent):void {
            inputField.htmlText = "Couldn't load the style sheet file.";
        }

        public function loaderCompleteHandler(event:Event):void {
            var cssFormat:TextFormat = new TextFormat();
            sheet.parseCSS(loader.data);
            var style:Object = sheet.getStyle("p");
            cssFormat = sheet.transform(style);
            inputField.defaultTextFormat = cssFormat;
        }
    }
}
StyleSheetExample.as

The following example creates a new style sheet and assigns bold and red font treatments to the heading style.
 
package {
    import flash.display.Sprite;
    import flash.text.StyleSheet;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    public class StyleSheetExample extends Sprite {

        public function StyleSheetExample() {
            var style:StyleSheet = new StyleSheet();

            var heading:Object = new Object();
            heading.fontWeight = "bold";
            heading.color = "#FF0000";

            var body:Object = new Object();
            body.fontStyle = "italic";

            style.setStyle(".heading", heading);
            style.setStyle("body", body);

            var label:TextField = new TextField();
            label.styleSheet = style;
            label.htmlText = "<body><span class='heading'>Hello </span>World...</body>";
            addChild(label);
        }
    }
}