Comments Sometimes we need to do some rich text formatting in a Label which may include “SuperScript” and “SubScript”.
Flex 4 and spark controls offer a very strong and easy way to implement this through “Text Layout Framework” . Flex 3 can also use the same provided we have included the swc of TextLayoutFramework. This is pre-included in Flash Builder 4.
The property we use is baselineShift of textFlow object of RichText controls.
A very similar example of how to use this in button is given at : http://cookbooks.adobe.com/post_Superscript___Subscript_with_Text_Layout_Framework-18175.html
But to use this for a Label where we don’t need the user interaction to achieve the same we need to set the “baselineShift”.
Below sample illustrates the usage of the same, both in MXML and ActionScript:
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function label1_creationCompleteHandler(event:FlexEvent):void
{
lbl.textFlow.baselineShift = "superscript";
lbl.validateNow();
}
]]>
</fx:Script>
<s:RichText textAlign=”justify” height=”50%” y=”100″ width=”50%” x=”130″>
<s:span>N</s:span><s:span baselineShift=”superscript”>2</s:span>
<s:span>+ N</s:span><s:span baselineShift=”superscript”>3</s:span>
<s:span> = N</s:span>
</s:RichText>
<s:RichText textAlign=”justify” height=”50%” y=”200″ width=”50%” x=”130″>
<s:span>N</s:span><s:span baselineShift=”subscript”>2</s:span>
<s:span>+ N</s:span><s:span baselineShift=”subscript”>3</s:span>
<s:span> = N </s:span>
</s:RichText>
<s:RichText text=”2″ id=”lbl” creationComplete=”label1_creationCompleteHandler(event)”
height=”15″ y=”50″ width=”12″ x=”130″ />
<s:RichText text=”N” id=”lbl2″ creationComplete=”lbl_creationCompleteHandler(event)”
height=”15″ y=”50″ width=”20″ x=”123″ />
The output would like as follows :
Hope this helps someone who is looking for a simpler approach to achieve the same.
Thanks to my friend Divya , for bringing this issue up 
.
thanks
Thanks but I think you need to work on your maths.
Please can you give an example using Flex 3.2.
I believe, you would need to download the TextLayoutFramework and integrate with your Flex 3.2 . Once you have done that the same code approach should work in Flex 3.2
Our colleague has already done that here : http://www.adobe.com/devnet/flex/articles/text_layout_framework.html
Let me know if you face any issues I’ll try to send the steps over.
Thank you for your prompt response. I did download the Textlayoutframework and was able to subscript with a rich text box but here I need it for displaying it on a label. Is it possible to display subscripted text in a label in Flex 3.2?
I might need to work on that sample for you. Please give me some time to try and get back.
Thanks! I appreciate your efforts. Sooner my company goes to Flex 4.5 the better!
Hi,
I was able to do this in Flex 3 but now am stumped… I use myString variable but instead of substituting the value of the variable, it just shows the variable name ‘myString’. Do you know the solution?
here is my code:
<![CDATA[
[Bindable]
public var myString:String;
[Bindable]
public var myLink:String;
private function insertSuperscriipt():void{
myString= "C2 S2″;
var supStartExpression:RegExp = new RegExp(“”, “g”)
var supEndExpression:RegExp = new RegExp(“”, “g”)
myString = myString.replace(supStartExpression, “”)
myString = myString.replace(supEndExpression, “”)
myString = myString + ‘ ‘ + ‘Contact ABC Scorecard System’;
myLink = “myString“;
textObject.htmlText = myLink ;
}
]]>
myLink line should be as follows:
myLink = “myString“;
instead of as
myLink = “myString“;
Hi ,
For some reason it replaces myLink with myString even though I had a myString<end a tag
where myString is the variable which I am trying to replace with subscripted text.
Thanks