Richtextfx: Question: How to create a bullet list?

[Kim4444]

Goal

I am trying to create a bullet list in my GenericStyledArea, that would look like this:

• line 1
• line 2

I have read Support for numbered and unnumbered Lists #384. So until that feature is implemented, I am trying to work with the existing version of RichTextFX. All my attempts have produced unsatisfactory results.

Attempts

I have tried the following approaches so far. I present these to perhaps stimulate any thoughts or variations:

• I used CSS to style the paragraph with "-fx-padding: 0 0 0 40;" (successful), and then place a bullet (just an asterisk at present) as the first Text segment in the paragraph, and to style that with "-fx-translate-x: -20". That almost works - the bullet is properly positioned, but when the list item itself requires multiple lines, the first line is incorrectly indented at <40 + width of bullet>, while the other lines are correctly indented at 40. e.g.,
  
  
  
  •   this is an example of a multiline list item, demonstrating that the first line is incorrectly indented a bit further than successive lines. xxx xxxxx xx xxxx xxx xxxxxxxx xxx xxxxx xx xxxx xxx xxxxxxxx xxx xxxxx xx xxxx xxx xxxxxxxx xxx xxxxx xx xxxx xxx xxxxxxxx.
  
  
• I have created a new SEGMENT class to hold the bullet, whose charAt() and getText() return an asterisk, but whose length() returns 0 (to try to remove that bullet-width indent) - no luck
• I have searched for JavaFX CSS styling for a hanging indent
• Also searched for overlays
• And just lots of Googling

Note that I am a beginner at CSS. :)

Does anyone know a way I could achieve this? THANKS!

Environment info:

RichTextFX Version: 0.10.1
Flowless 0.6.1
ReactFX 2.0-M5
UndoFX 2.1.0
WellBehavedFX 0.3.3
Operating System: Windows 10
Java version: 8u181

[Jugen]

Sorry for the delay it took me a while to experiment and figure this out.

You could try using a paragraph graphic factory like I've done here to create the bullets and add that to the text area (see here in this prototype RichTextDemo).

I've added icons to RichTextDemo courtesy of @afester from #824 (as well as using code from his playground) and also modified ParStyle to use a new Indent pojo.

Doing it this way will give you complete control of the bullet code without depending on RichTextFx "internals".

[Kim4444]

wonderful, I will try that! no problem, about the time you needed; I am just grateful for your efforts. I am coming to understand RichTextFX slowly and surely, and I really like it.

[Kim4444]

Jugen,

Sorry for my delay (family emergency, holiday). And thanks again for your work on my question!

Your demo works perfectly, until I add a call to area.setWrapText(true) - then, for a list of bulleted items, where one list item wraps into multiple lines, the bullet is centered vertically on the N lines of text. I was hoping for the bullet to be aligned with the just first line of those N lines. I have looked at the LineIndicator demo from RichTextFX, and when setWrapText(true) is added there, it gives similar behavior. I have googled for any solutions for this, but found none.

Also, the comment on get/setParagraphGraphicFactory() says the node "is positioned to the left of the first character in a paragraph's text.", but I cannot find a way to force that, with wraptext on.

Is there a way to position the bullet on the first line of the N lines?

[Jugen]

I've updated the paragraph graphic factory example to wrap the bullet node in a VBox so that the bullet remains on the top line when wrapping occurs.

[Kim4444]

That works perfectly. Thank you so much!