Superscript and Subscript in Actionscript

Unfortunately, superscripting and subscripting text in actionscript is not an included feature of TextFields. So, I’ve built a utility class to handle all your superscripting and subscripting needs. I’m just going to give a general overview here but provide the source code for download so you can just plug it in to whatever you’re working on.

First off, what we’re going to be doing is switching out the font of superscripted/subscripted areas for a font that is superscripted/subscripted. For this, I’m using GG Superscript and GG Subscript. Download them!

Also, I’m using Flex Builder 3 and I’ll be building this as a Library Project. So keep that in mind.

Step One: Embed The Font

Put the fonts in a single Font SWF and then embed that SWF multiple times. If you don’t know how to make a Font SWF don’t worry, I’ll be making another post on how to do it. Or you can just Google it.

[Embed(source="../embedded/fonts.swf", fontName="GG Superscript")]
public static const superscriptFont:Class;

Step Two: Search

In order to know when to superscript we’ll need to search through the text for a certain tag. We could use  but if you’re already doing htmlText on your selected TextField then that tag will get ripped out before you have a chance to look for it. So I’m going to use [sup][/sup] so it will work in htmlText and normal text instances.

public static function superscript(tf:TextField):void
{
	var regExp:RegExp = /[sup](.*?)[/sup]/i;
	var result:Object = regExp.exec(tf.text);
 
	if(result)
	{
		// do it again recursively
		TextFieldUtil.superscript(tf);
	}
}

This is a recursive function because that RegEx is only going to match the first occurrence of the [sup] tags.

Step Three: Rip Out The Tags

After a match is found we have to rip out the actual tags from around the text but we also have to keep the any TextFormats intact. So, all we have to use is the replaceText function.

if(result)
{
	// rip out the tags and preserve all other text formatting
	tf.replaceText(result.index, result.index + result[0].length, result[1]);
 
	// do it again recursively
	TextFieldUtil.superscript(tf);
}

Step Four: Change The Format

Here’s where the text actually gets superscripted. All we have to do is swap out the font for that chunk of text.

if(result)
{
	// rip out the tags and preserve all other text formatting
	tf.replaceText(result.index, result.index + result[0].length, result[1]);
 
	// actually superscript the text
	tf.setTextFormat(	new TextFormat(	"GG Superscript",
						tf.defaultTextFormat.size,
						tf.defaultTextFormat.color,
						tf.defaultTextFormat.bold,
						tf.defaultTextFormat.italic,
						tf.defaultTextFormat.underline,
						tf.defaultTextFormat.url,
						tf.defaultTextFormat.target,
						tf.defaultTextFormat.align,
						tf.defaultTextFormat.leftMargin,
						tf.defaultTextFormat.rightMargin,
						tf.defaultTextFormat.indent,
						tf.defaultTextFormat.leading),
				result.index,
				result.index + result[1].length);
 
	// do it again recursively
	TextFieldUtil.superscript(tf);
}

It might look like a lot of code, but it’s really just one line that we added, there just happens to be a lot of typing, plus it’s broken out so it’s easier to read.

Conclusion

That’s pretty much it. Go ahead and download my textfieldutil so you can see how it all fits together.