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.

I present the following two commercials, demonstrating the same basic product.

Perhaps I’m a cynic. Perhaps I’m completely out of touch. One thing occurs to me immediately upon watching these advertisements: Why the hell should I want to post to facebook or twitter while I’m watching television? Even if I did, would my television be a good tool for the job? This all reads like the wrong product in the wrong place to me.

It’s clear that communication and leisure are undergoing dramatic changes in step with technological progress, trending towards convergence around do-it-all devices equipped to help us navigate the glut of data we’ve grown accustomed to consuming, but where should we draw the line?

It’s not that I feel that either television or twitter is so sacred that the comingling of the two is either offensive or unforgivable, but rather I wonder whether there is any longer such a thing as undivided attention? I think it’s quite possible that we’re too plugged in.

What’s more, I hope the fact of the matter is that companies like Verizon and their competitors just don’t get it, and that products and services like the ones advertised above fail miserably. I hope that most consumers, whatever I may generally think of them, see through this for the pathetically impotent offering that it is.

Matt Kenefick over at Big Spaceship Labs posted a thoughtful, level-headed examination of the debate on the future of Flash considered against the emerging “threat” of HTML5. This is one of the better articles I’ve read on the matter.

Thibault Imbert just released the first chapter of his forthcoming eBook, “What Can You Do With Bytes?” I’m excited. You should be too.

On a side note, how does one pronounce “Thibault?” I’m guessing it sounds something like “Tee-Bo.”

My App Icon

I spent a little bit of time developing the icon for my first publicly released AIR application. I’m not telling what it does yet, but hopefully I’ll be offering up the first version of it some time soon. What do you think?

I’ll be releasing the very earliest version of an AIR app I’m working on some time soon. I have a huge list of features that I want to provide for it, and the first release won’t get near accomplishing them, but thanks to a tutorial I checked out today I feel confident offering incremental upgrades.

What tutorial did I read? This tutorial on providing automatic update functionality to AIR apps! Many thanks to Greg Wilson for the super-easy tutorial and useful sample files.