Ok.. this is a “fugly” hack to get subscript and superscript support in dynamic text fields in Flash… it was my somewhat successful attempt to get around the fact that you can’t get subscript characters into dynamic text fields by using the HTML <sup> or <sub> tags, there’s nothing in the CSS support in Flash, and there’s no .subscript or .superscript properties for the textFormat object. So basically if you want to show 24 or 142312(n2) or I2 in a dynamic text field in Flash you’re kind of screwed (unless you do some whacked out hack like I did).
So basically what I found is a set of unicode characters in Microsoft Sans Serif (the only font that I could find that had 0-9, n, (), and [] in both superscript and subscript) and embedded them in the SWF. I then have code that will look through an HTML string for subscript or superscript tags and replace the text within them with the corresponding unicode characters…. there’s also a function that looks for the unicode characters, and if it finds any in a string it will replace them with plain ASCII characters wrapped in either the sup or sub tag.. a hack that basically gives Flash support for a limited range of superscript and subscript characters.
If anybody has suggestions please lemme know..
See the SWF here
Get the FLA here
oh… and PLEASE go submit a request to Macromedia to add support for the <sub> and <sup> tags. http://www.macromedia.com/support/email/wishform/
11 May 2004 at 03:18 pm | #
Thanks.
This is not going to be fun.
I betcha I'm going to run into major problems trying to superscript special french characters.
Thanks again for a starting point.
James.
10 Jun 2004 at 07:48 am | #
My guess is that it won't work.. the only way I was able to get this crude hack going was by finding a limited range of characters (0-1, N, (),[]) that exist as superscript or subscript in unicode already..
13 Sep 2005 at 10:20 am | #
there's a new technote here: http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=1959eceb&pss=rss_flash_1959eceb
from Macromedia that addresses this (but not with a fix)..
18 Aug 2006 at 11:44 am | #
Hey Mike,
I've noticed that this doesn't work on a Mac. The unicode characters only display if you use TextField.text, but they appear wrong if you use TextField.htmlText.
I wonder if the last 2 versions(MX'04 & 8) have provided any hidden gems that will make this easier? Certainly no <sub> <sup> tags yet, and none in AS3 as far as I can tell.
What I really need is a font that is all in subscript and a font all in superscript, that way I can just find and replace <sub> with <font face="theSubFont"> and <sup> with <font face="theSuperFont">.
But, after 2 years of searching, I haven't found such a font. If you know of anything, I'm much appreciate if you could give me ahint of where to find it. I'll definately pay money for it!
-abeall
30 Nov 2006 at 07:40 am | #
... That looks very chunky...
... I don't want to play anymore...
04 Jan 2007 at 04:05 pm | #
i think that you could have just created a different dynamic text with a smaller font and position it higher than the dynamic text for the base, then parse the string and display each token where it should go. it's cheap. =)
04 Jan 2007 at 04:58 pm | #
chieripot,
We've done that. Not a good idea. Too much work, extremely slow, not really possible for large complicated blocks of text. There are a lot of issues that crop up that you might not think about, its not a "just", its a ton more complicated than Mike's solution. Also, due to system inconsistencies, it is still not a very reliable method--don't even think about using TextFormat.getTextExtent to measure text accurately on all systems!
21 Nov 2007 at 04:23 pm | #
I found a site where they give you a font for superscript and subscript. It seems to work properly.
http://blog.ggshow.com/index.php/reference/2007/04/19/how_to_use_subscript_aamp_superscript_in
Nord'z
21 Nov 2007 at 09:36 pm | #
the problem with using a specific font is you have to alter the HTML coming into the text field.. you aren't using sub and sup tags. You might be able to do a substitution for the sub and sup HTML tags for the special font tags, but it's still a hack.
Also, I just reread the comments here about this not working on a mac. I had pointed out that I was using MS Sans Serif because it had the specific unicode subscript and superscript characters I was interested in. Macs don't come loaded with MS Sans Serif.. you might find another font for mac that has the characters and embed that in your swf.
21 Nov 2007 at 10:47 pm | #
Nord'z -
Awesome! Thank-you for sharing, it looks perfect. Haven't tried it out yet, but it looks like what I've been searching the past 3 years for.
Mike -
Yeah, it's still very hacky, and even requires a resurrection of the nasty FONT tag. But it should be easy (and reliable) to just find and replace <sub> and <sup> tags with a <font> tag.
About the Mac, the problem was that even when I rendered the .swf on the PC and embedded Microsoft Sans Serif, it wouldn't appear correct when the .swf was viewed on a Mac (I think it actually displayed incorrect characters -- it's been awhile). I actually had even installed Microsoft Sans Serif on the Mac, and it still didn't work. Very strange.
Hopefully this will all be moot and we'll get a native solution with Flash Player 10 and the coming Text engine:
http://aralbalkan.com/1048
PS - I'm very thankful this comment system has email notifications turned on, so I could come back and get the goods!
11 May 2008 at 04:22 pm | #
I want to share with you the way I get may subscript and superscript inin dynamic and input text field in Flash:
<sub> & <sup> tags are not supported by Flash :( but you can
use Subscript & Superscript in dynamic and input text field in Flash:
Download & install Subscript & Superscript fonts from http://www.subscriptfont.com or http://www.superscriptfont.com
You will need to restart Flash software after installed fonts.
Create a dynamic text field with Arial font embeded. Set the HTML property to true.
Create a dynamic text field with Subscript font embeded.
Create a dynamic text field with Superscript font embeded.
Use HTML tag to set text to subscript or superscript like below:
Some text<font face="Superscript">©</font>
If you are using ActionScript to test the htmlText, use script like below:
my_txt.htmlText = "Some text<font face='Superscript'>TM</font>";
Data can come from a XML file, TEXT file or from flash itself.
They are better than CG since it goes lower than the baseline and it's real subscript..
21 May 2008 at 05:30 pm | #
Just shooting a idea out there that I'm about to try, but couldn't you apply CSS to a text filed and then do "This is some text with a footnote<sup>3<sup>." and then set a "sup" css style to be the correct font size/style your looking for?
Mark
21 May 2008 at 05:48 pm | #
Unlike savil76's fonts, these subscript/superscript fonts are free:
http://blog.ggshow.com/index.php/reference/2007/04/19/how_to_use_subscript_aamp_superscript_in
Mark, that's not a bad idea for subscript, I have used that method. The problem is it doesn't work for superscript, because there's no supported CSS style to move move the sup character up.
21 May 2008 at 06:29 pm | #
True ... I can't go the embeded route either because I'm using alot of getTextExtent work to highlight behind words and embedded fonts seem to be alot smaller than there device font counterparts.