Superscript and Subscript TextArea Component
Submitted by ben.bishop on Fri, 10/17/2008 - 19:15.Problem:
You need to display superscripts and subscripts in a TextArea.
Solution:
Embed super and sub script fonts and extend the TextArea component to automatically update the stylesheet object to apply the font to "sup" and "sub" tags. For extra convenience make this a component that can be reused easily.
Here's a breakdown of the component's source code:
Embedding of fonts
[Embed(source='/assets/fonts/ARIALSUP.ttf', fontName='Arial', mimeType='application/x-font' )]
private var baseFont:Class;[Embed(source='/assets/fonts/ARIALSUP.ttf', fontName='ArialSup', mimeType='application/x-font')]
private var superscriptFont:Class;[Embed(source='/assets/fonts/ARIALSUB.ttf', fontName='ArialSub', mimeType='application/x-font')]
private var subscriptFont:Class;
Creation/Updating of TextArea's stylesheet:
override protected function createChildren():void
{super.createChildren();
var ss:StyleSheet = new StyleSheet();if(this.styleSheet == null){
this.styleSheet = new StyleSheet();
}
this.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontWeight:"normal"});
this.styleSheet.setStyle("sub", { display: "inline", fontFamily: "ArialSub"});this.setStyle("fontFamily", "Arial");
}
To implement:
1. Point your project to the SupSubTextArea swc/library
2. Use MXML to add the TextArea to your poject like you would with any other component:
<components:SupSubTextArea fontSize="13" width="300" height="300" condenseWhite="true" fontSharpness="400">
<components:htmlText><![CDATA[
One of a series of saturated aliphatic hydrocarbons having the formula C<sub>n</sub>H<sub>2n+2</sub>. Paraffins constitute the methane or paraffin series.
]]></components:htmlText>
</components:SupSubTextArea>
Example Project and Library source are attached to this blog post.
| Attachment | Size |
|---|---|
| SSTextArea.zip | 2.29 MB |
