indieas

I’m sure that everybody that ever try to apply a stylesheet to a textfield in Flash encountered some problems. Thats why I though I will write a summary about the workaround that I found so far.

First thing to know is how flash can apply css on text. If you set for example:

textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

You can style the text between tags here: <b>..</b> and <h1>…</h1> if you define css definition for these tags. An example css file would look like:

b {  font-weight: bold; }
h1 {  size:16; }

and the corresponding as source to set the styleSheet would be:

private function onLoaded( e:Event ):void {
// The TextLoader is a class from the indieas library
var loader:TextLoader = e.target as TextLoader;
var css:StyleSheet = loader.getDataAsCSS();
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";
}

Here its important that you set the text property after setting the styleSheet otherwise it will not apply the styles.

So far everything works as expected but what if you also want to style the normal text without any tags. You could wrap the text content in another tag like:

<text>Hello is it <b>me</b> you <h1>looking</h1> for.</text>

But thats not very handy instead we use the TextField own property defaultTextFormat. We can transform a css into a TextFormat and apply that as defaultTextFormat like this:

var styleObject:Object = css.getStyle( "*" );
var defaultStyle:TextFormat = css.transform( styleObject );
textField.defaultTextFormat = defaultStyle;
textField.styleSheet = css;
textField.text = "Hello is it <b>me</b> you <h1>looking</h1> for.";

Again here the order of applying defaultTextFormat, styleSheet and text is important. If you have a styleSheet applied and you want to set the defaultTextFormat it will throw an error. So if you want to reapply the defaultTextFormat do it like this:

var style:StyleSheet = textField.styleSheet; // save the styles to reapply them later
textField.styleSheet = null; // set this null to allow seting the defaultTextFormat
textField.defaultTextFormat = // new format;
textField.styleSheet = style; // reapply styles
textField.text = textField.text; // reapply text

The last thing to mention is the textField.condenseWhite property. Very often you load your content from an xml file and like to show a node content in a textField. But as the xml itself has linespaces and breaks the shown text is weird formatted. To avoid this use textField.condenseWhite = true. To make a new line just add a <br/> tag to your xml content and make sure your textfield has multiline set to true.

Summary:

• use defaultTextFormat for default text style.
• transform the defaultTextFormat from a StyleSheet style.
• properties set order: defaultTextFormat, styleSheet, text.
• set condenseWhite = true when setting xml content to the texfield.

To play around download a demo FlexBuilder project here.