GGshow reloaded GGshow reloaded

April 19, 2007

How to use subscript & superscript in dynamic and input text field

Issue:

  • Unable to use subscript or superscript in dynamic and input text field.
  • Unable to display subscript or superscript for external loaded text.
  • Unable to use <sub> & <sup> tags in dynamic or input text field.
  • To create subscript or superscript text without Text Layout Framework (TLF).

Reason:
<sub> & <sup> tags are not supported by Flash.

TechNote: Subscript and superscript fail in dynamic and input text fields
LiveDocs: Supported HTML tags

Solution:

  1. Download & install GG Subscript & GG Superscript TrueType fonts. You will need to restart Flash software after installed fonts.
  2. Create a dynamic text field with Arial font embeded. Set the HTML property to true.
  3. Create a dynamic text field with GG Subscript font embeded.
  4. Create a dynamic text field with GG Superscript font embeded.
  5. Use HTML tag to set text to subscript or superscript like below: 
    Adobe<font face="GG Superscript">TM</font>

    If you are using ActionScript to test the htmlText, use script like below:

    my_txt.text = "Adobe<font face="GG Superscript">TM</font>";

Demo:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Download:
superscript.fla
superscript.swf

Updated: (2008-09-21)
A new set of superscript & subscript fonts includes both sans & serif type, with more complete & improved glyphs, standard scale & shift, is now available to be downloaded (free) from here.

Updated: (2010-10-23)
Another set of fonts for displaying square root (SQRT), cube root, nth root, and other roots formula in dynamic and input text field is now available here.

Related:
For creating subscript & superscript text with Text Layout Framework in AS3 or Flex project, refer to here

Filed under: ActionScript,HTML — Tags: , , , , — GG @ 5:51 pm

No Comments »

  1. Thanks sooo much, I just had a very disappointing experience when I found that my way of importing various unicode characters from text files only worked on Macs, and I was at a loss – but you fixed the subscript/superscript part of my problem (the biggest part). Thanks again

    Comment by Aisha — July 13, 2007 @ 10:27 pm

  2. Just now im hearing this superscript along with the flash. Nice to learn

    Comment by senthil kumar — August 21, 2007 @ 5:32 pm

  3. wow. you totally made my day. I’ve been trying to put subscripts in all week!! Thanks so much!

    Comment by Yin — November 8, 2007 @ 6:27 am

  4. Works great! You made my day. Thanks so much.

    Comment by GW — December 21, 2007 @ 1:09 am

  5. You don’t know how long I’ve been looking for these two fonts. Well, I’ll tell you: about the last 4 years. All other hacks I’ve tried have had issues. Thank-you very much for sharing!!

    – aaron

    Comment by Aaron Beall — January 24, 2008 @ 11:17 am

  6. Couldn’t believe there’s no native support for subscript tags in flash. You helped me out… thank you so much!

    flo

    Comment by flo — February 13, 2008 @ 7:01 pm

  7. thank u so much.

    Comment by priti — May 30, 2008 @ 7:42 pm

  8. Here is a nice solution for using GG superscript & GG subscript with <sup> & <sub> tag

    Comment by G — July 12, 2008 @ 6:28 pm

  9. Also work in flex
    http://jasonbejot.com/?p=3

    Comment by G — July 12, 2008 @ 6:32 pm

  10. Actually I want to allow users to type in subscript and superscript in the text box I created in Flash, so what is the method for me to do this?

    Comment by slyyee — August 26, 2008 @ 7:17 pm

  11. thats good

    Comment by Wally — September 28, 2008 @ 8:26 pm

  12. Nice tip, it’s a real timesave. Thank you very much!

    Comment by Evan Gifford — October 23, 2008 @ 7:57 am

  13. it works great except that my users will have to download and install this font right? is there a way to embed the font in the app or somehow keep it on the server side only?

    thx steve

    Comment by steve h — December 17, 2008 @ 7:27 pm

  14. Am I right in saying this doesn’t work in Flash 7? (I know who targets flash 7…!)

    Comment by JRM — January 14, 2009 @ 7:05 pm

  15. Hi JRM,

    I’ve tested this solution in Flash Player 7, 8, 9 (CS3), both AS2 & AS3, it works.
    If you have problem using the fonts in Flash 7, you can send me your FLA file I’ll look at it.

    Comment by G — January 14, 2009 @ 11:09 pm

  16. Anyone know if there is a way to get this text to be bold?

    Comment by parkej60 — January 18, 2009 @ 11:36 pm

  17. You need to ensure that you have embeded the bold font. Set the font to bold for the dynamic text field which used to embed font.

    If you need multiple style (regular, bold, italic, bold italic), you will need to use multiple dynamic text field to embed the fonts. E.g. create 4 dynamic text fields, one with regular font, one to embed bold font, one for italic, and one for bold italic. Embed font for all the 4 text fields.

    If you need only regular and bold styles, use only 2 dynamic text fields for font embeding. Now you should be able to have bold in your superscript.
    Adobe<font face=”GG Superscript”><b>TM
    <b>Adobe<font face=”GG Superscript”>TM</font></b>

    Comment by G — January 19, 2009 @ 12:51 am

  18. The GG font apparently only allows for you to embed it as a regular font style, it doesn’t appear to have a bold font style.

    If I import it with Faux Bold checked it doesn’t seem to change anything.

    Comment by parkej60 — January 19, 2009 @ 3:09 am

  19. Example below uses GG Superscript Sans font, with regular, bold, italic, bold italic.

    Comment by G — January 19, 2009 @ 12:25 pm

  20. wow, thanks a lot for the great tip, works perfectly for me 😀

    Comment by jairus — February 2, 2009 @ 10:57 am

  21. does not work in flash 10

    Comment by Kelly Burmeister — April 24, 2009 @ 5:18 am

  22. What about a Mac Compatible Font?

    Comment by Friendly Bud — June 19, 2009 @ 12:33 am

  23. Great font’s,serious problem solved on this project I’m working on, in fact before I found this site I was about to buy them of that guys site you talk about above (the fairly blatant theft is incredible) instead I’ll make a donation to you, thanks.

    Comment by delux — July 16, 2009 @ 12:31 am

  24. I can’t even tell you how much this fix has helped my team and I!!

    Nils Ellis
    Integrated Marketing Communications – Sr. Designer
    Advanced Micro Devices, Inc.

    Comment by nils ellis — August 6, 2009 @ 12:16 am

  25. It’s really a great help of me. I have been searching the solution for last many days.

    Thank you so much.
    Jitendra Panwar

    Comment by Jitendra — September 8, 2009 @ 9:56 am

  26. Any idea of how to implement this in Flex?

    Comment by JK — October 15, 2009 @ 12:15 pm

  27. Thanks, but not working in Flash CS4. 🙁

    Comment by Gyurci — November 16, 2009 @ 9:36 pm

  28. How to make this work for embedded flash file inside html.

    This seems to work offline but not online. Or is there something I missed?

    Comment by Stephen — January 21, 2010 @ 8:38 am

  29. OK, I figured it out.

    since I created the textfield dynamically from script, I need to create a font object and assign it to the textformat instance. then set the textfield’s embedFont property to true.

    Comment by Stephen — January 21, 2010 @ 10:50 am

  30. Can any one tell the solution?

    I am loading text from xml file. In that i have text like 10 -18.
    -18 is superscript. It is not working when i am loading that text to my flash dynamic text field.

    Thanks in advance

    Ranadheer

    Comment by Ranadheer — February 25, 2010 @ 2:56 am

  31. You just saved my graduation project with this information! Finally able to write decent molecular formulas! Thanks a BILLION!!!

    Comment by Jori — May 6, 2010 @ 7:48 am

  32. Thank you .

    Comment by Friv — October 10, 2010 @ 8:20 pm

  33. Hi. I just noticed that your blog looks like it has a few code errors at the very top of your site’s page. I’m not sure if everybody is getting this same bugginess when browsing your blog? I am employing a totally different browser than most people, referred to as Opera, so that is what might be causing it? I just wanted to make sure you know. Thanks for posting some great postings and I’ll try to return back with a completely different browser to check things out!

    Comment by Oren Ross — October 10, 2010 @ 10:30 pm

  34. Hey Thanks a lot….. I have been tried of reading all useless posts. This is great. Thank you 🙂

    Comment by Yamini — October 12, 2010 @ 6:14 am

  35. Can somebody help me to create square root in flash As2 dynamic field??

    Comment by Yamini — October 12, 2010 @ 10:36 am

  36. Yes the square root is on its way ^^

    Comment by G — October 22, 2010 @ 2:15 pm

  37. Hi
    But to see this superscript, do we need to install the font on clients machine??

    Coz its not showing as superscript if font is missing.

    Comment by Deepak — December 10, 2010 @ 2:27 pm

  38. Thanks for a great tutorial. I tried to put the code on a button instead so if I click the button, for example” subscript two”, it will show in the input field. But what if I have several text fields and several buttons and want to write in a text field one at a time but using the same buttons. Say for example that I want to write two different chemical formulas in two different input text fields but only have one “virtual keyboard”. Is there a way?
    Thanks 🙂

    Comment by Tom — February 4, 2011 @ 3:52 am

  39. You just saved my graduation project with this information! Finally able to write decent molecular formulas! Thanks a BILLION!!!

    Comment by Jocuri — September 20, 2011 @ 9:29 pm

  40. Another unexpected usage of GG Superscript Sans
    http://andydavies.me/blog/2013/01/14/implementing-sparkicons/

    Comment by G — February 4, 2013 @ 2:25 am

RSS feed for comments on this post.

Leave a comment

© 2024 GGSHOW | Powered by WordPress