Adding bulleted text

[Nikos_]

Hi,

How would you go about adding bullet points? Would you use an inline image? If yes, how would you:
* tab the bulleted text to start underneath the bullet tab and not at the start of the new line?
* resize/position/align that depending on font size/height?

Thanks
Nikos

[Nikos_]

..any ideas?

[tpf70]

From what I understand, bulleted lists are not currently supported.

The way I would do this is to create a paragraph with a left margin.
Then add an inline image as the first character.

Next to have spacing between the bullet and the text,
Add a tabstop to the paragraph and (after the image) inject a tab character (hmm...I havent tried that) or,
a set of spaces that have a character format of a fixed space font.

[joe.shankar]

One quicker and simpler way to deal with bullets is to use a left margin and tab as suggested by Tim but use the Unicode character for the bullet in a standard font such as Times New Roman. Try importing the TLF Markup below in the online Text Layout Editor. You can import the xml below by copying and pasting it in the dialog box when you click the "Markup..." button in the Text Layout Editor. I've called out the unicode characters for the standard bullet characters.

<?xml version="1.0" encoding="utf-8"?>
<TextFlow verticalAlign="inherit" lineBreak="inherit" paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" whiteSpaceCollapse="preserve" xmlns=" http://ns.adobe.com/textLayout/2008"><p marginLeft="20"><span>
</span><span fontFamily="Times New Roman" fontSize="32">
• Round bullet '\u2022'
◦ White bullet '\u25e6'
▪ Black small square '\u25aa'
▫ White small square '\u25ab'
</span><span>
</span></p></TextFlow>

[brian_thomas2]

Also check out this blog post on the topic: Bullet Points and Text Alignment in the Text Layout Framework

[Nikos_ · Accepted solution]

Thanks guys,

I have built a TLF text editor for a flex application.

For bullet points, I have followed Richard Leggett's approach of adding a SpanElement at the beginning of the paragraph containing a bullet symbol and a couple of tabs. However, I get the following problems:

1. I use marginLeft to indent the whole paragraph to the right and textIndent to indent the bullet to the left (default bullet format). While this works fine for some font sizes, it wont work for bigger or smaller text, unless i do some clever calculating of font size vs marginLeft/textIndent and number of tabs required.

2. Bullet characters can be deleted, which leaves the marginLeft/textIndent formatting. No big deal though..

3. When adding a bullet to and empty paragraph, I create the bullet span, but I cannot get the cursor to go to the second empty span. Therefore, the user types in the same bullet span which leads to other problems, particularly when I try to delete the bullet (first span)

4. When I try to remove the bullet from the paragraph, I sometimes get errors fired from the applyParagraphFormat. I don't always find it easy to debug this when I get errors like this:

Cannot access a property or method of a null object reference.
at flashx.textLayout.edit::ParaEdit$/cacheParagraphStyleInformation();

Is there any way to get the bullet as a span or another paragraph, outside the main text paragraph? I think that would solve lots of problems.

Would you mind sharing some source code if you feel that it could help?

Thank you for your time

Nikos

[rdermer]

After making direct model changes make sure you update the display by calling updateAllContainers. Otherwise the displayed TextLines are invalid and are display only.

That's also required after model changes and before calling applyParagraphFormat.

Empty spans get deleted and spans with identical properties get merged during updateAllContainers - which is why I suspect you aren't calling it. Try putting a zero width space in if you want the bulleted text in another span and giving it an id or a styleName different from that of the bullet.

That's an open bug regarding issues with empty Spans with an id getting deleted. The fix may be worse than the workaround so it may not get addressed.

[Nikos_]

Are bulleted lists supported in the new version?

[rdermer]

No.  Not in 1.0 or 1.5.

[Pravin_mahida]

i m new with text layout framework want to apply bulletlist on selected text of textflow.

I also follow same Richard Leggett's  approach of adding a SpanElement at the beginning of the paragraph. i got success with first and last paragraph in my selected textflow by using following code.

             var paraFormat:ParagraphFormat = new ParagraphFormat();
                    paraFormat.marginLeft = 15;
                    var pElement:ParagraphFormattedElement = elementRange.firstParagraph;
                     var span:SpanElement = new SpanElement();
                     span.text = "\u2022   ";
                     pElement.addChildAt(0,span);
                     pElement.paragraphFormat = paraFormat;
                     _textFlow.flowComposer.updateAllContainers();

elementRange is selectedEvent.selectedElementRange

i dont get any methods that helps me to traverse thru selected textflow and apply this to all paragraph.

please help me if any one has idea on this.

Thanks in advance for any help.

[rdermer]

You are using a very old build.  In more recent builds there is a getNextParagraph method of ParagraphElement.

If you want to backport it here's the code:

public function getNextParagraph():ParagraphElement

{

var nextLeaf:FlowLeafElement = getLastLeaf().getNextLeaf();

return nextLeaf ? nextLeaf.getParagraph() : null;

}

That should help you iterate through the paragraphs of a selection.  Best would be to move up to a newer build - there've been a lot of changes.

Regards,

Richard

[Pravin_mahida]

Thanks Richard.

i got latest Text layout framework from Weekly builds and the thing are working for me.

now i have one another issue is my current bullet list not wroking proper as it was working

in flex 3 textarea. also i try to apply bullets on spark textarea but not getting textfield in <s:Textarea>

can any one help me out how to apply bullets on textarea.

Thanks in advance for any help.