Bullet point list

Hey all,
I want to achieve a simple "bullet point list" like layout such as below:

• Item 1 - long text here that will wrap according to it's window size
  
• Item 2 - another long text here
• Item 3 - etc.

I'm using an Image for the bullet point and Text right next to it. And just like a simple list, as the width of the window changes, the items' vertical position should change to accommodate for the wrapping of the text. Is there a way to achieve this with existing UI components? I've tried using a combination of Vertical Layout Group and Content Size Fitter but had no success.
All help is appreciated.

 

Hi artaka,

I achieved this effect by using a GameObject with the VerticalLayoutGroup script.


Containing per bullet a GameObject with the HorizontalLayoutGroup script.


... with as first child a GameObject with Image script ( for the bullet image ) and LayoutElement script.


... and as second child a GameObject with Text script.



So in the Scene hierarchy this looks like;



Works perfect for me!
The bullet lists behaves exactly as you would expect. Bullets images and text lines are aligned to the upper left corner of there available space and as the width of the window decreases the bullets vertical positions change to accommodate for the wrapping of the text.

Hope this helps. Cheers.

 

Here's what that item list looks like in Unity UI;

 

Thanks theolagendijk! I ended up doing something very similar.

 

Just in case you would like to achieve the same results more efficiently without having to use a dozen or so objects, here is an example using TextMesh Pro which only uses a single text object.





This uses a single TextMesh Pro text object which contains one child since I am using a different font for the Mariko GmbH. This is done by using the <font> tag or in this case <font="Avalon Bold SDF">MARIKO GmbH</font>.

The lines of text which contain bullets are enclosed in the <margin-left> tag which is this case was <margin-left=1em>... </margin>. This allows indenting them as a block.

The bullets are done by simply using the UTF16 character \u2022. The indentation of the bullets is done by using the <indent> tag. So in this case the bullets lines are something like "\u2022<indent=3em>The text that will be indented.</indent>". Multiple levels of indentation is also possible.

Here is another example combining the <indent> and <sprite> tag. Note that changing the size of the RectTransform still results in the correct formatting and word wrapping of the text.

 

That's really cool.. Thanks Stephan, I'll look into TextMesh Pro...

 

Thanks and feel free to reach out to me should you have any questions.

 

Hi everyone !

sorry to digger such an old thread but i've had a realy good use of ur solution above and i was wondering if there was anyway to have filled square bullet ? i've tested every utf 16 character that is a square bullet and in every case it's unfilled, as the round bullet is filled is was wondering if i was doing something wrong or anything ? i'm using offical ghotic ttf file !

thanks

 

Hey, is there a way to get bullet points to work within an TMP_InputField? all the tags are working but the bullets won't work.

Sorry for responding to such an old thread

EDIT: I figured it out the text object that is assigned to the Text Component variable in Input Field needs Parse Escape Characters, under extra settings, to be unchecked in order for it to work.

EDIT 2: Ok, so that didn't really work. Apparently it only worked if I checked or unchecked it while playing. However keeping it unchecked on start did nothing and keeping it checked did nothing. Is the Input Field doing something to keeop this from happening?

 

I actually have the same behaviour when adding text dynamically into a regular TMP UGUI field. It only works if I toggle Parse Escape Characters from Off to On at runtime

 

Hi all,

A little gift...

I've cooked up a string extension which converts raw text with bullets into marked-up text which TextMeshPro will parse and display with consecutive lines of bulleted text correctly indented...

Code (CSharp):

1.        
2. public static string TPM_MarkupBullets(this string rawText, char findBullet = '•', float indent = 1f, float leftMargin = 1f ) {
3.             bool isInBullet = false;
4.             string markedup = String.Format("<margin-left={0}em>", leftMargin);
5.             string indentLeftTag = String.Format("<indent={0}em>", indent), indentRightTag = "</indent>";
6.             foreach (char c in rawText) {
7.                 if (c == findBullet) { markedup += findBullet + indentLeftTag; isInBullet = true; }
8.                 else if (isInBullet && c == (char)10) { markedup += indentRightTag + c ; isInBullet = false;  }
9.                 else { markedup += c; }
10.             }
11.             if (isInBullet) markedup += indentRightTag;
12.             markedup += "</margin>";
13.             return markedup;
14.         }
15.  

Usage example:

Code (CSharp):

1.  
2. [SerializeField] TMP_Text prerequisites;
3. //...
4. prerequisites.text = role.EntryRequirements.TPM_MarkupBullets();
5.  

Enjoy,
Isaac

 

Works like a charm. Turned it into an editor script (removed extension)

Code (CSharp):

1. [MenuItem("Tools/Add Bullet Formatting", false, 4000)]
2.     static void AddBulletFormatting()
3.     {
4.         var go = Selection.gameObjects[0]; //be smarter about this
5.  
6.         var text = go.GetComponent<TMP_Text>();
7.         text.text = TPM_MarkupBullets(text.text, '•', 1, 1);
8.  
9.         Undo.RecordObject(go, "Add Bullet Formatting");
10.  
11.     }