Dan
Dan

Reputation: 45

Flex 3: Different text styles within same label/control

Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.

e.g. I have a label

I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).

So, the question in a nutshell is: Is there a flex equivalent of the following HTML?

<p class="english">bro<span class="highlight">th</span>er</p>

If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?

Thanks to anyone who can help!

Dan

Upvotes: 1

Views: 9903

Answers (2)

inferis
inferis

Reputation: 1303

Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.

<mx:Label>
    <mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>

The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :

Paragraph tag

The <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. class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

Span tag
The <span> tag is available only for use with CSS text styles. It supports the following attribute:

class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

Ultimately, there are quite a few ways to do what you want.

Upvotes: 0

kenneth
kenneth

Reputation: 1065

yes, try the following

var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';

Upvotes: 1

Related Questions