Flash CS3 Documentation 
Programming ActionScript 3.0 > Working with text > Example: Newspaper-style text formatting > Reading the external CSS file

Reading the external CSS file

The News Layout application starts by reading story text from a local XML file. Then it reads an external CSS file that provides the formatting information for the headline, subtitle, and main text.

The CSS file defines three styles, a standard paragraph style for the story, and the h1 and h2 styles for the headline and subtitle respectively.

p {
    font-family: Georgia, Times New Roman, Times, _serif;
    font-size: 12;
    leading: 2;
    text-align: justify;
}

h1 {
    font-family: Verdana, Arial, Helvetica, _sans;
    font-size: 20;
    font-weight: bold;
    color: #000099;
    text-align: left;
}

h2 {
    font-family: Verdana, Arial, Helvetica, _sans;
    font-size: 16;
    font-weight: normal;
    text-align: left;
}

The technique used to read the external CSS file is that same as the technique described in Loading an external CSS file. When the CSS file has been loaded the application executes the onCSSFileLoaded() method, shown below.

public function onCSSFileLoaded(event:Event):void
{
    this.sheet = new StyleSheet();
    this.sheet.parseCSS(loader.data);
    
    h1Format = getTextStyle("h1", this.sheet);
    if (h1Format == null)
    {
        h1Format = getDefaultHeadFormat();
    }
    h2Format = getTextStyle("h2", this.sheet);
    if (h2Format == null)
    {
        h2Format = getDefaultHeadFormat();
        h2Format.size = 16;
    }
    displayStory();
}

The onCSSFileLoaded() method creates a new StyleSheet object and has it parse the input CSS data. The main text for the story will be displayed in a MultiColumnTextField object, which can use a StyleSheet object directly. However, the headline fields use the HeadlineTextField class, which uses a TextFormat object for its formatting.

The onCSSFileLoaded() method calls the getTextStyle() method twice to convert a CSS style declaration into a TextFormat object for use with each of the two HeadlineTextField objects. The getTextStyle() method is shown below:

public function getTextStyle(styleName:String, ss:StyleSheet):TextFormat
{
    var format:TextFormat = null;
    
    var style:Object = ss.getStyle(styleName);
    if (style != null)
    {
        var colorStr:String = style.color;
        if (colorStr != null && colorStr.indexOf("#") == 0)
        {
            style.color = colorStr.substr(1);
        }
        format = new TextFormat(style.fontFamily, 
                              style.fontSize, 
                              style.color, 
                              (style.fontWeight == "bold"), 
                              (style.fontStyle == "italic"), 
                              (style.textDecoration == "underline"), 
                              style.url, 
                              style.target, 
                              style.textAlign, 
                              style.marginLeft, 
                              style.marginRight,
                              style.textIndent, 
                              style.leading);
        
        if (style.hasOwnProperty("letterSpacing"))        
        {                  
            format.letterSpacing = style.letterSpacing;
        }
    }
    return format;
}

The property names and the meaning of the property values differ between CSS style declarations and TextFormat objects. The getTextStyle() method translates CSS property values into the values expected by the TextFormat object.

Flash CS3