Yesterday, as has happened many times before, I ran into a serious problem working with text in Flash: correctly rendering superscripted characters in a dynamic text field. This has been a problem in Flash for some time. Adobe seems to have no interest in fixing it, so the community has come up with a solution of its own. I repeat that solution for you here in as much detail as I have patience for.
Step 1: Download Special Fonts
The preferred method for addressing this problem involves html text, font tags, and a couple of special fonts designed to resemble superscripted characters without actually being superscripts. Personally, I have always used GG Superscript and GG Subscript, provided by the wonderful author of GG’s Flash Blog, who also wrote the first tutorial I ever saw on this issue. Apparently GG has offered up several other fonts that expand on the capabilities of the originals, and those can be found here. I can’t comment on this second set as I haven’t used them personally, but I see no reason to assume they don’t work just the same as the original set. For the purposes of this tutorial, I’ll be assuming you proceeded with GG Superscript.
Step 2: Embed Your Fonts
In order for this method to work, you have to make sure that your superscripted font is embedded. This is easy enough to do. Start by creating a new text field, and set the font for this text field to your superscripted font of choice.
Then, click on the “Character Embedding…” button, and embed the elements of the font that you’ll be using. You can either broadly embed a large range of characters…
…or you can cut it to the specific characters you’ll be needing (better idea). I typically find myself embedding the registered symbol, the copyright symbol, and the trademark symbol.
Finally, since you won’t actually be rendering text here, just move this text field off stage. We’re just using it to guarantee that our fonts are embedded and available.
Step 3: Create Your Text Field
For the sake of argument we’ll be doing this in Flash. The code for doing so looks like this…
var field:TextField = new TextField();
addChild(field);
field.multiline = true;
field.htmlText = "This copy is registered®, copyrighted©, and trademarked™";
field.width = field.textWidth+5;
field.height = field.textHeight+5;
field.x = (stage.stageWidth-field.width)/2;
field.y = (stage.stageHeight-field.height)/2;
…and the result looks like this:
The trademark symbol even looks alright without getting into the next steps, but we’ll carry through all the same so you can see the difference.
Step 4: Add Font Tags
There are two ways you can proceed from here, depending on the scope of your project and how complicated your needs are.
If you’re not working with a large amount of copy, or if you need to be very precise about how text is rendered, it may be in your best interests to hard code all of your font tags.
Using the sample from above, your new code would look like this:
var field:TextField = new TextField();
addChild(field);
field.multiline = true;
field.htmlText = "This copy is registered<font face='GG Superscript'>®</font>, copyrighted<font face='GG Superscript'>©</font>, and trademarked<font face='GG Superscript'>™</font>";
field.width = field.textWidth+5;
field.height = field.textHeight+5;
field.x = (stage.stageWidth-field.width)/2;
field.y = (stage.stageHeight-field.height)/2;
This isn’t very glamorous, but it works. The downside to this is that if you have a large number of special characters that need the super treatment, you’ll have to pick through all of your text and wrap every symbol in a font tag.There is another way that’s quite a bit more fun.
If you have a larger quantity of text you need to take care of and you’re less concerned about small level details, you can do something like this…
var reSuper:RegExp = /(\®|\©|\™)/g;
var str:String = "This copy is registered®, copyrighted©, and trademarked™";
var field:TextField = new TextField();
addChild(field);
field.multiline = true;
field.htmlText = str.replace(reSuper, "<font face='GG Superscript'>$1</font>");
field.width = field.textWidth+5;
field.height = field.textHeight+5;
field.x = (stage.stageWidth-field.width)/2;
field.y = (stage.stageHeight-field.height)/2;
I prefer this method, mostly because I love any excuse to use Regular Expressions. The benefit to using this method is that you don’t have to worry about adding, removing, or maintaining font tags in the copy you’re putting in. You could also theoretically apply this method to other characters (numbered references anyone?), or use it to apply other styles to your text rather than just changing fonts (italics, bold, etc.). Pretty sweet huh?
Regardless of which method you use, you’ll get the following when you compile:
In case the difference isn’t obvious, check out the comparison below. The first line of text is the original text. The second line is the text after our pseudo-superscript has been applied.
Step 5: Celebrate
Your superscripts now work. Why not have a beer? Something good.
About AgitCraft