GET YOUR SUBSCRIPT & SUPERSCRIPT FONTS HERE
Subscript and Superscript in Flash.html
SubscriptandSuperscriptinFlashActionscript.html
SubscriptandSuperscriptinFlashActionscriptHTML.html
flash-professional_subscript-numbers.html
index.html
repalce_subscript_superscript_flash.html
see a webcam girl.html
sitemap.html
subscript superscript in texatrea flash.html
subscript superscript in xml and flash.html
subscript superscript in xml.html
subscript tags superscript flash textarea actionscript.html
subscript_flash.html
subscript_flash_cs3_cs4.html
subscript_superscript in_xml_flash_actionscript.html
subscript_superscript in_xml_flash_actionscript_html.html
subscript_superscript.html
superscripd_subscript_in_actionscript_xml_flash.html
superscript flash actionscript adobe.html
webcam nude.html

GET YOUR SUBSCRIPT & SUPERSCRIPT FONTS HERE
TDOT Blog Touchwood Creative

Register | Forgot password?

Author Info

Name
Ben Bishop

Job Title
Senior Interactive Developer



Touchwood is continuing to grow!

We are looking for talented Flex developers to join our Interactive Group. If you have any interest we would love to meet you. Please email your resume to us at:

jobs@touchwoodcreative.com


Superscript and Subscript TextArea Component

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.

AttachmentSize
SSTextArea.zip2.29 MB
© Touchwood Creative 2007 | We use Firefox