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 :

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:

protected function label1_creationCompleteHandler(event:FlexEvent):void
lbl.textFlow.baselineShift = "superscript";


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