Styling Html TextField Bullet Points

If you ever needed to style the bullet points in a Html TextField in Flash you have noticed that this isn’t supported. It gets even worse if the bullet point in the font you’re using isn’t nice at all and you want to take another fonts bullet point.

But with a simple workaround you can change the font face, size and color of the bullet points:

And don’t forget to embed the bullet point, it’s character U+2022

Update 25.01.2010

Added an indent property to easily set the left margin of the list. For using other symbols than the bullet, you have to manipulate your font and embed the manipulated character.

Download Source



12 Responses (Add Your Comment)

  1. Yeah, comes to the rescue :)

  2. Cool, had many problems with bullets and TextField before. How would that work when the line is slightly longer? Would it indent the second (wrapped) line?

  3. yeah sure. I’m using normal lists for that

  4. hi everyone where do i get the fonts that are in the class so i can embed them?

    Thanks

    Daniel

  5. hey daniel, you don’t have to use DIN and Helvetica, you can use the font of your choice. In case you want to use DIN and Helvetica you’ll have to buy them (e.g. http://www.linotype.com)

  6. Hi everyone..

    The script works fine.. but does anyone know how to make a square instead of a bullet? and how to change the indentation of the list..

    I tried to put the unicode U+25A0 for the square but that didnt help..

    Hope someone can help me out here.. Thanks!

  7. Hey Hanna,

    Flash automatically takes the U+2022 Character in your font, you can’t change that. To get a square instead of a bullet you either look for a font that has a square at U+2022 or you edit the font file and put the square to U+2022.

    You can indent the list using stylesheets.
    I can send you an example later on … just drop me a line if you need one

  8. Hey Martin,

    Thanks a lot… An example with font and the stylesheet for the indentation would be great!

  9. ok stylesheets didn’t work with the hack, but I found another way … see the examples above

  10. Hey Martin, nice and very helpfull trick ;-)

    It seems only that when the list text goes to two lines the ‘non printing char’ leaves a space.

    http://www.nyls.nl/grabs/e565a24a8e2b59011e032c19541cc5d0.png

    You have had any problem with that ?

  11. the ‘non printing char’ shouldn’t leave a space at all! (that’s basically the reason for the name). You have to take a char in your font that doesn’t get printed and doesn’t leave any space … you could also specify a char of you font that isn’t embeded (e.g. you embed A-Z than you can use any other character)

Trackbacks:

Leave a Reply

Formatting: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Other Entries

About

Martin Rädlinger is an Interactive Developer & Designer. He specializes in interactive coding predominantly with ActionScript, but every new challenge is welcome. If you like his work feel free to get in touch with him. At the moment he's available for freelance work.

Contact

Martin Rädlinger
mail: mr [at] formatlos.de
web: www.formatlos.de
xing: Martin Rädlinger
linkedin: Martin Rädlinger
skype: martinraedlinger