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:
Set the Indent to create the "0.5 in" space from the left margin.
Adjust Prefix Width to control the space reserverd for the bullet or number (give it enough also for two-digit numbers).
Adjust horizontal Spacing (←→) to reserve space between the space reserved for the bullet or number and the list item content.
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
... View more