Nested Bullets in Flash

You may recall a blog entry quite a while ago where I discussed goofiness in flash that inadvertently changed the color of an HTML bullet in a Flash TextField to match some color applied to some text inside the bullet? Happily, that was solved and it took forever to figure that one out. This one has plagued me for far longer!

This has, I am sure, been a point of frustration for many for a very long time. Bullets in flash. The trouble is quite simple really. You get one level of bullets, and one level only. With traditional HTML you could nest bullets just like you would in a word processor document and it would look mostly comparable. With flash, this is not the case. Take the following code for example:

<ul>
     <li>Item 1:Nesting Level 1</li>
     <li>Item 2: Still Level 1</li>
     <ul>
          <li>Item 3:Nesting Level 2</li>
          <li>Item 4: Still Level 2</li>
          <ul>
               <li>Item 5: Now at Level 3</li>
          <ul>
     </ul>
</ul>

This would normally get me to three nested levels of bullets. Not so in Flash. In flash, this is how it would look:

• Item 1:Nesting Level 1


• Item 2: Still Level 1


• Item 3:Nesting Level 2


• Item 4: Still Level 2


• Item 5: Now at Level 3

The reason is also simple. Flash has no understanding of the <UL> tag. So, after years of fiddling and searching, and finding nothing, I think I have finally found the closest answer to this dilemma. Check out the following flash-specific HTML formatting:

<TextFormat blockIndent="0">
     <li>Item 1:Nesting Level 1</li>
     <li>Item 2: Still Level 1</li>
     <TextFormat blockIndent="20">
          <li>Item 3:Nesting Level 2</li>
          <li>Item 4: Still Level 2</li>
          <TextFormat blockIndent="40">
               <li>Item 5: Now at Level 3</li>
          </TextFormat>
     </TextFormat>
</TextFormat>

I was working on a project where some of the text in the page needed "indenting" and I accidently forgot to close the TextFormat tag, which resulted in bullets in the remaining portion of the loaded text to indent. Eureka! A completely accidental solution!

So, this is how you translate nested bullet levels into something flash understands. Pretty straight forward. As you can see however, you have to specifically set the indentBlock to the correct precise character position for each level. It would be so cool if it were simply true that nested formatText blocks would have an accumulative effect (i.e. a formatText with an blockIndent of 20 inside another formatText with an blockIndent of 20 would, in that case, equal an spacing of 40 from the left edge), but unfortunately they do not. You are basically setting temporary indenting with respect to the extreme left edge of the textField when you use the blockIndent attribute of the formatText tag.