Custom bullet points using Flex

Question

Hi All,

Any idea how can i draw this using Flex ?? Instead of using image for 1, 2 and 3?

Regards, PK

Answer 1

You could make a custom component for the bullet that has an image with a label over top of it. Then all you need to do is set the label text (to 1, 2, or 3).

Alternatively, take this a step further and make a custom component for a 'bullet item' that would contain an image with a label over top (for the bullet) with a second label on the right (for the item text).

Either would allow you to create your bullet list with using a series of different images for your bullet items.

Answer 2

The reverse-type enclosed numbers are part of Unicode, so if you embed a font in your Flex app that includes these characters, you should be able to do this with any of the regular text components. You can either embed the entire font, or just be sure you select the needed subranges including the extra number characters you need.

1 thru 10 are in the Dingbats section, from U+2776 to U+277F in a heavy serif font, and from U+278A to U+2793 in what looks to be Helvetica. Because these are considered dingbats, I would expect the forms of these characters to look like what you see in the PDF, rather than using the letter forms of the regular digits in your chosen font. If so, just choose the range that complements your main text font best.

Then off in the Enclosed Alphanumerics section, you have 0 and 11 thru 20 in still another font, a lighter serif font than used for 1-10 in the Dingbats section. Because these are just supposed to be enclosed versions of regular numbers and letters for the font, it's possible they will match the main text font rather than what you see in that PDF.

Bottom line, it might be worth investigating several fonts to find one that lets you mix and match all the pieces you need and still look good.