Robohelp 2022 - Why are the lists so confusing?

[JenniR_12]

I think I just hit my breaking point.  I've spent one entire day messing with these lists trying everything I can think of to just add 1/2" space between my number or bullet and my text.  I've messed with the autonumbering, I've messed with ol and ul styles and decimal styles and alpha numberic styles, disc styles, created my own styles, modified the existing styles and I can't make it work.  I've literally spent the last 20 years teaching paragraph numbering in MS Word to adults of varying skill level.  I cannot believe it is this confusing.  I have NO (ZERO) idea what any of the fields inside of the "style editor", I guess it's called, even do as it relates to setting up a freaking numbered or bulleted list.  Prefix Width, what is it?  What does it control?  Do I need it?  Indent?  What does that control?  If I literally click the increase arrow on the indent field, what is it indenting.  Sometimes my preview will move allowing me to get a glimpse of what that does, but sometimes it doesn't do anything even when I increase or decrease the number.  And, sometimes, it moves when I'm looking at the Preview inside the Style editor, but when I get to my topic there is no change at all.   What is it?  What does it do?  Do I need it?  Spacing (with a horizontal arrow) - what does it do?  Spacing with a vertical arrow?  What does it do?  When do I use that?  if I enter a number in vertical spacing, what's it suposed to do?  Because I thought LINE HEIGHT was where I needed to be for line spacing.  So what is vertical spacing?  Why is it there?   I still don't know exactly what Padding does.  I click on the arrow and it does one thing in the preview, but when I go look at my document, I see absolutely no change.  Why?   Does it adjust the space between the number or bullet and my text or does it set a 2nd line indent?   Why is it that the preveiw inside the editor ONLY shows the first line of whatever level you are on.  Why not give us a preview of what a multiple line list item would look like as it relates to the wrapping location.  Because, what happens is that I take a guess and make a change inside the Style editor and then have to leave the editor and go out to my topic and see if it did anything  (and 100% of the time it didn't) and then I have to go back in to the editor and by that time, I've lost my place because none of these fields are intuitive in the UI, and eventually, I just start this stupid process all over again.  I've never ever seen anything so confusing and counterproductive.  The more I do the less I know.  I just wanted a list that starts 1/2" in from the left margin followed by a tab space of 1/2" at which point my text should begin and I want the 2nd line to wrap right up under where the 1st line text begins.  Can't make it happen. 

I have found very few online video tutorials on Robohelp 2022.  It would have been nice to see practical examples of how this stuff works.  The easy stuff is documented, it's the actual stuff that real people do every day in their jobs, that's lacking as far as online information that  would be helpful goes.  Where is all of the RH videos and tutorials that go through REAL life examples?  Peter has excellent information on his site, but things, at times, don't work as expected.  I am finding "help" articles that specifically say version 2022 , but the screens aren't the same as what I'm seeing.  I spend tooo  much time trying to figure out which verion of Robohelp the articles I'm fiding are even dealing with.  What an absolute cluster.  I give up. I can't understand it.  And, I give up. This has been an epic failure and it's not for lack of trying bc God knows I've spent weeks trying to figure this out. 

I have a Monday morning deadline where this help file I'm working on is to be submitted to our SME's so they can look at and approve the FORMATTING and I'm not going to make the deadline.  I give up.  I'm gong to bed bc there is no chance this is going to get any better tonight.   I'm not even looking for a response, I'm just venting.  I've asked the same question a few times on different posts and I don't think really anyone knows the answer.  Doesn't seem like there is clear cut way to get from here to there.  Like, in Word, if someone were to ask me where do they go to set the 2nd line wrap, I could literally direct them right to the specific place where they can make that happen.  And, that doesn't seem to be possible and I'm not sure why other than it's incredibily confusing for everyone.  I don't know html and am not familiar enough with CSS to pull this off.  I just wanted to know where in the UI I needed to go to make these very simple list look nice and polished with the settings I need.    I give up.  Hope others have better luck than I did.

[Peter Grainge]

I've literally spent the last 20 years teaching paragraph numbering in MS Word to adults of varying skill level.

****

Of absolutely no relevance. I did explain why Adobe had separated all the settings you are working with. It's a bit like saying I have taught English for 20 years and saying you are having trouble with German where I believe sentence. construction is different. 

I understand your frustration but long posts like this don't help solve the problem. I will be back later next week and will try to help you then. Send me your CSS and  Word document explaining and showing what you are trying to achieve.

________________________________________________________
My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Stefan-Gentz]

Dear Jennifer,

I can sense your frustration, and it's completely understandable. Transitioning from the familiar territory of Microsoft Word to the vast ocean of HTML and CSS can be quite a challenge. I'll try to help with some analogies to the world of Word as well. The base for all this is HTML and CSS, which gives almost endless possibilities for formatting lists (you can find some beautiful examples of list formatting ideas for example here).

Let's go through some of the terms you see in the user interface and explain what they mean.

Let me try to break them down:

• Indent: Imagine the left margin in Word. In CSS, RoboHelp’s list Indent is akin to setting the left margin for your list. If it’s set to 40 px, think of it as the whole list starting 40 pixels from the left side (your text flow, or, e.g., the left border of a table cell). It's your list's personal space from the document's edge. Following, for sub lists, it’s the indent for the sub list items compared to the parent list item’s indent.
  
  
• Prefix Width: This sets aside space for the bullet or number – like creating a special reserved space for it. With a Prefix Width of 50px, each bullet or number gets a 50 pixel-wide spot to sit comfortably before your text starts.
  
  
• Horizontal spacing (←→): This defines an additional space after Prefix Width ("Prefix Gap"). That is, it’s the space right after the space reserved for the list marker (Prefix Width) before the text content of the list item starts. It's like the space you'd add in Word after a bullet point before the text follows. E.g., with Prefix Gap set to 20px, there's a 20-pixel "bridge" between the end of the list marker space and the start of your text.
  
  
• Vertical Spacing (↑↓): A Vertical Spacing of, e.g., 20px creates a consistent (vertical) 20-pixel space between each of your list items, akin to setting a fixed space after each paragraph in Word.

Under "Layout" you will also find Margin and Padding, that give you additional control over the spacing of lists:

• Margin refers to the space outside element. It's like the buffer zone between your list (or list item) and other items in your content.
  Think of the margin in CSS like the margins you set in a Word document; it's the space around the outside of your content (like a paragraph, list, list item, etc.) that separates it from other content. So, in a web page, a margin determines how much space is between the border of your list and any other items.
  
  
• Padding is the space between the content (your text) and the border of an element. Think of it like a passpartout in a picture frame. Padding is similar to adjusting the space between the border of a text box and the text inside this text box in Word. It "cushions" the content from touching the border directly. In a web page, increasing padding will make your content appear more inset, giving it room to breathe inside its own boundary.

I hope this helps you feel a little bit more at home with list styling in RoboHelp. If anything is still unclear or if you need more guidance, please let us know. We’re here to help you set sail smoothly on this new adventure.

I just wanted a list that starts 1/2" in from the left margin followed by a tab space of 1/2" at which point my text should begin and I want the 2nd line to wrap right up under where the 1st line text begins.  

For your specific case, here's a simple approach you might want to try:

1. Set the Indent to create the "0.5 in" space from the left margin.
2. Adjust Prefix Width to control the space reserverd for the bullet or number (give it enough also for two-digit numbers).
3. Adjust horizontal Spacing (←→) to reserve space between the space reserved for the bullet or number and the list item content.
4. Use vertical Spacing (↑↓) if you want to increase or decrease the space between the list items.

Here is an additional "visualization":

[Indent: 0.5in] [Prefix Width: 50px] [Horizontal Spacing (←→): 10px] [List content]

This would make the list number or bullet start 0.5 inch indent to the right, followed by 50px reserved space for the numer or bullet, followed by 10px "gap" before the list item content starts.

Keep in mind, the changes you make here should be previewed in the "Preview" window, but sometimes the changes may not appear until you save and view the document outside the style editor.

If you are still not seeing the changes you expect, it could be due to other overriding styles or settings. More details to understand the exact formatting you are trying to achieve and what exactly is not working, might help us to help you 🙂

I hope this helps you get a bit closer to the list format you're aiming for.

Warm regards,
Stefan

[JenniR_12]

Stefan:  Wow!!  Thank you so much.  No where online could I find the definitions or the explanations of what those fields were controlling.  The more I Iooked at them, the more I just felt like they all meant the same exact thing, yet, the combinations that I was trying (which fields I was putting a number in and which ones I was leaving blank) didn't work.  I just kept thinking if I only knew what this field controls or what this field does, I could determine if I even needed it.  I think your explanation is easy to understand and it makes sense to someone that has worked in IT for 2 decades, but has limited experience with HTML and 0 eperience with CSS.  I have written complex macros in Word but that wasn't really useful here.  So, I appreciate you laying this out so that someone of reasonable intelligence and limited HTML experience can now follow what we are looking at.  I think this post is going to be very helpful to others in the same situation as I found myself in.  So, I thank you for taking the time to reply.  I am going to give this one more try, as I said, my deadline is tomorrow morning.  I hadn't planned on even looking at it today, but with your explanation, I'm excited to see what I can now do.  Thank you for the visual representation below as well.  This all needs to be included in the knowledgebase for RH or somewhere easily accessible for beginners.  Additionally, a few video tutorials on numbering or fixing imported word lists would be so useful.  Showing autonumbering and HTML lists.  There is a lot of written documentaton, but hardly any videos with useful information.  A video tutorial of taking a word file that has styles in it, and importing it into RH and then tips and tricks on how to work with that content in RH.  Stripping the formatting, and creating the list and styles in RH and applying those list styles to your content in Robohelp .  Practical examples of how to work with files brought in from elswhere.  Most of what I found was showing how to import something and map styles and then nothing beyond that.  It's the "beyond that" that gets tricky and confusing.   Well done and so much appreciated.   I will follow up and let you know how it goes later today.

[JenniR_12]

Hi.  I tried to look at those list examples in your 1st message by by clicking on the link and it won't let me get there.  It says about:blank#blocked in the URL line on both my work machine and my home machine.  So, I'm unable to see those examples.  Thank you.  Jen

[Stefan-Gentz]

Sorry, I had accidentally copy and pasted text from the post as the URL 🤦🏼, so it could not work!

I have fixed the link in the post, so if you refresh this page, it should work.

Here is also the link:

https://freefrontend.com/css-lists/

It's just one of many websites out there with creative list stylings. I found this one useful for inspiration and because it provides links to the source code of the given examples. Looking at them helped me alot to get a deeper understanding of list formatting.

Of course, in the world of CSS there are often many ways to achieve visually identical results.

[Stefan-Gentz]

I tried to visualize it … hope that helps:

[JenniR_12]

I had another question that popped up yesterday.  When I use the bullets or numbered toolbar buttons at the top of RH, it will turn my highlighted text into a list (if I have something highlighted first) or it will give me a bullet or number and postion my cursor to start typing my list.  If I look at the Style pane, I have seen the style Decimal or Disc or Circle or AlphaNumeric as the active style based on which of those toolbar buttons I used to create my list.  Here is my question....if I need to create a new list style for a numbered list, do I duplicate the <ul> style, name it and edit the new <ul> style and set up my levels inside <ul> or do I create a new style based off of the Decimal style and set up my different levels inside the Decimal style?  I've done it it all and nothing was working so I just want to be clear as to which style do I use to duplicate for each type of list?  Nmbered list, do I use Decimal or <ol>, bulleted list, do I use Disc or <ul>?  Multilevel lists I assume use the Alphanumberic style (but I could be incorrect)?  It would be helpful to better understand what is what.  I hope this question makes sense.

[Amebr]

The pre-defined ol.Decimal style  name is composed of two parts: the Tag and the Class. The Tag is the html element you want to style. The Class is the style name. You know how in Word there are Paragraph and Character styles? The tag part is similar to these categories in Word. The Class part is similar to the style name you would select (Normal, Heading 1, Caption.) It's not exactly the same, but it's a useful comparison to keep in mind, at least when starting out.

So ol.Decimal is saying "I have a customised ordered list style, and I've called in Decimal". Keep in mind the Class part is just a text string and isn't linked to how the style is set up. For example, you could call a style ol.Turtle. All you know from this name is that it relates to ordered lists. You need to go in to the style and check the Style field for what numbering scheme is used. Again, this is the same as Word, where I could call a style Rumpelstiltskin and all I would be able to tell is that it was either a paragraph or character style and I'd have to go in to the dialog boxes to find out about the other settings.

When setting up a style you can start fresh by clicking creating a new style and selecting the Tag and typing a new Class name. Or you can duplicate an existing style and rename the Class so it's unique for the Tag. In both cases, make all your changes in the new style you created. Levels, font and size, numbering scheme, etc. 

As I mentioned in a previous post, there are a bunch of different Style keywords you can select from. Ol, which stands for ordered list, will use a number or alphanumeric style, while ul, which stands for unordered list, will use a bullet symbol. If you don't specify the type, ol defaults to 'decimal'. ul defaults to 'disc', a round bullet. 

When you want to apply your custom list style, you'll need to apply it using the Styles panel, not from the bullet or number button on the toolbar. These buttons are hard-coded to the built in styles only.