Multi Level Lists

 

 

What's covered?

Apart from a minor issue covered in this topic, multi level lists are less affected by browser rendering differences and can be mapped to Word multi level lists. That deals with two problems that have bugged authors for a long time!

This page explains how to create multi level lists in RoboHelp 8 and above.

Click here for information on single level lists.

Click here for the List home page.

Accessing Multi Level Lists

To start a multi level list, click the multi level list icon shown below. RoboHelp will then display a dialog showing separately any lists already used and the available list templates. There is no option to modify the list styles here.

In the Style Pod you can select any list style you have already created or you can create a new list but without being able to choose from the templates.

List Templates

Let's start by using two of the supplied list templates as that is the easiest way to get going. For this topic I have used the Basic Number and Bullets list templates.

Basic Number

You simply enter the list content and for each level you use the indent icon.

So type "First list level" and press Enter. Click the indent icon and the numbering will change ready for you to type the next level. You can use the indent icons at any time to change the list structure.

You can customise the indent level, the use of brackets after the number and so on using the List Editor. That is covered later.

Bullets

Same procedure.

The indent levels and characters used can be changed using the List Editor.

Editing List Styles and Creating Your Own

If the supplied list styles suit your needs, that's it. Chances are though that you will want to make some changes so let's take a look at the List Editor.

 

The first thing to note is that each level is edited separately, the level being selected in Apply Formatting To.

The second thing is that Paragraph Style is what controls the appearance of the content of the lists, all the other settings in this dialog for affect the numbers or bullets.

This table shows what controls what.

Apply Formatting To

The level in the list that will be affected by what you set in the Style and Formatting frames.

Paragraph Style

The style that will be applied to the contents of the list. I particularly recommend you do select a style if you create printed documents.

List Style

The dropdown contains many pre-configured list styles to select from. You can mix and match at different levels so that you have numbers at the top level and bullets at the next level, for example.

The New button is covered separately below.

Edit Style

<x> represents your bullet or number character. You can add/remove other characters such as brackets before or after the bullet or number.

Insert Level

This is only enabled for levels 2 and below. You use this to achieve numbering such as below.

1.1.1.

What this is doing is prefixing <x> with the level(s) you insert from the dropdown so in this example what you would see in Edit Style would be

<1>.<2>.<x>

Font

As far as I can determine, this affects the font used for the number in numbered lists only. It does not seem to affect the font used for bullet characters.

The font for bullet characters can be important if you are using Firefox as that does not support Comic Sans very well and more importantly it does not support Wingdings which is what RoboHelp uses by default. More about fixing that below.

Use to set the colour of the bullet or number.

Use to highlight the bullet or number.

Set the numbering to bold, italic or underlined.

Indent / Outdent List

 

Increase Space

 

Decrease Space

 

 

The positioning of the list and the list content is the area that seems to cause trouble so using an example let's look at how they interact.

Using the default Bullet style gives a list like this. Each bullet is indented in equal increments as is the content.

Now lets add some more content and note how the second line of text aligns with the bullet.

There are two things that many authors will want to change.

  • The way the text aligns.
  • The way the bullets at each level align.

Both can be changed in the List Editor.

Text Alignment

The preview shows in black the level being edited, other levels are shown in grey.

To get the text to align, click the Increase Space icon. I usually find two clicks gets the desired result.

Bullet Alignment

You can use the Indent / Outdent List icons to move each bullet level. The catch is that you cannot specify the exact amount so getting the bullet or number to align with the text involves manually editing the CSS.

Open your CSS in Notepad or a CSS Editor other than RoboHelp's and locate the style definition for the list. For each level you will find a margin such as the one shown below for Level 2. Change the width for each level to get the result you want. In this example I changed it to 45px and got the result I wanted.

x-lvl-2-margin: 40px;

You can also edit the text indent defined by changing the value of x-lvl-2-text-indent.

The setting seems to stick if you make other changes to the CSS.

New list styles using the New button

The purpose of the New button is to create new sequences. This can be useful if the standard numeric or alphabetical sequences do not meet your needs. An example might be you want numbers to increment in steps of ten to give you 10, 20, 30 etc. You can also set it up so that the first item is Question and the second item is Answer to give you a list such as:

Question: Your question.

Answer: Your answer.

Question: Your question.

Answer: Your answer.

Question: Your question.

Answer: Your answer.

 

The sequence applies at the same level. Thus each time you press Enter after creating the Question item, the next item in the list will start with the text Answer. It is not a method of getting square bullets to follow round bullets. Follow below how a Firefox problem is solved using the sequence editor and you will understand better how the Sequence Editor works.

Fixing bullets in Firefox

Firefox does not support Wingdings so what looks OK in the Design Editor and in Internet Explorer...

... doesn't look so good in Firefox.

If that is a problem for you, then the New button is the place to go.

Initially it will be blank so click the + sign and enter a sequence name, then select a font. I suggest you use a unicode font but its pretty much anything you want except Comic Sans and Wingdings, they are known to cause problems in Firefox.

I suggest you create a new project and experiment a little as it becomes much clearer when you try it hands on. Here I have created three sequences to match the example.

Now we define the bullet for each sequence. You need to get the bullet you want onto your clipboard. I use the Windows Character Map by simply typing Charmap into the Run field.

There you locate the bullet you want, click Select and then Copy.

In the Sequence Editor click Add and note the little white area to the right of the blue field, that indicates it is editable. Paste your bullet in and click OK.

Here I have defined the round bullet I want rather than the one to which RoboHelp defaults.

Repeat the process for MySquareBullet and MyOpenBullet, clicking OK when RoboHelp prompts about updating.

When you return to the List Editor, select Levels 1, 2 and 3 in turn and select the bullet style for each. Return to the Design Editor and generate the help again. This time you will see the same in Design Editor, Internet Explorer and Firefox.

 

Images

Images cannot be used in multi level lists.

Printed Documentation

You can map multi level lists created in RoboHelp to multi level lists created in Word. The Employee Care sample project that ships with RoboHelp 9 shows a mapped list style, see the Printed Documentation section in the About Employee Care topic.

TIP Create a multi level list and just use the first level. Map that to a Word multi level list and you may avoid indenting problems that you have encountered in the past.

Donations

If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions

Date

Changes to this page

07 Feb 2017

Topic reviewed. No changes made except the versions covered. Any screenshots may differ in your version of RoboHelp but the functionality is the same.

26 Mar 2011

New topic.