To add SuperScript or SubScript in Label – Flex 4

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 :) .

11 Responses to To add SuperScript or SubScript in Label – Flex 4

  1. Pingback: To add SuperScript or SubScript in Label – Flex 4 « Anju's Flex … | Flex learner

  3. Fletch says:
    February 15, 2011 at 10:34 am

    Thanks but I think you need to work on your maths.

  4. Kshah says:
    December 2, 2011 at 4:03 pm

    Please can you give an example using Flex 3.2.

  5. Kshah says:
    December 2, 2011 at 6:13 pm

    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?

  6. Kshah says:
    December 5, 2011 at 1:44 pm

    Thanks! I appreciate your efforts. Sooner my company goes to Flex 4.5 the better!

  7. Kshah says:
    December 6, 2011 at 3:35 pm

    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 ;
    }
    ]]>

  8. Kshah says:
    December 6, 2011 at 3:38 pm

    myLink line should be as follows:

    myLink = “myString“;

    instead of as

    myLink = “myString“;