User Guide Cancel

Multi-level Autonumbering in CSS

What is Autonumber

Autonumber is a style to associate numbers with headings and paragraphs, which automatically gets incremented. The number can be of any type- decimal, roman, bullets, custom characters, images, and so on. An Autonumber can be multi-level. Autonumber can be multi-level, for example, you can associate a first level with Heading 1 and second level with Heading 2, which will increment in sync.

The CSS editor in RoboHelp supports multi-level autonumber authoring for heading and paragraph styles. You can control the styling of number and content and for different levels.

Note:

An Autonumber may mimic a list, but is different in behavior. A list is always contiguous, whereas Autonumber is not. You can number the Headings, list of tables, list of figures, and so on, using autonumber, which you cannot perform using a list.

Enable autonumbering

Autonumbering is applicable to a paragraph or a heading. To enable autonumbering, double click your CSS file in RoboHelp to open it in the CSS editor.

On a heading or paragraph style, enable the option Autonumber.

Select autonumber
Select autonumber

Define Autonumber for a style

You can apply autonumbering for a heading or paragraph style. Choose a heading and apply the styles. Follow the procedure below:

Autonumber workflow
Autonumber workflow

  1. Enable the option Autonumber.

  2. For the heading level, for example h1, define a style. From the Style drop-down list, choose a style for the autonumber. After you choose the style, you can see the preview. For example, if you choose the option decimal from the list, the preview updates to:

    1 Level 1

    2 Level 2

    You can also specify the format in which you want the numbering to be. For example, you may want the number prefixed or suffixed by any character. For example,

    1.Level 1

    2.Level 2

    Note:
    1. You can apply autonumbering for base classes (for example, p, h1) as well as custom classes (for example, New style).
    2. A heading style by default gets applied to both numbering and heading text. However, you can set the style for numbering and text differently.
  3. Alternatively, you can also insert an image or any character to be used for numbering. You can have your own icon for numbering of the bullets.

  4. Change the indentation and spacing between the number and the heading text. The options are:

    • Decrease and increase indent.
    • Decrease and increase indent between prefix and content.
    • Decrease and increase vertical spacing.

    To change the spacing between number and text, use the options below to modify the spacing between the prefix and the content, as shown below:

    Indentation and spacing
    Indentation and spacing

  5. Choose the other properties, for example, font, font size, color, and so on.

    Coloring in autonumber
    Coloring in autonumber

  6. At any level, if you want to clear the formatting, choose the level, and click Clear Level Formatting

    Clear the formatting
    Clear the formatting

    After you click the button, you are prompted to clear or retain the formatting. Click Yes or No.

Autonumbering in levels

By default, there are six paragraph or heading levels, Level 1 through Level 6. When you define an autonumber style to Level 1, all other levels inherit the styles from Level 1. If you want to override the styles for the other levels, you must style each level individually.

You can also insert an image for the bullets.

Set autonumbering levels
Set autonumbering levels

Formatting numbering

As mentioned before, when you define the styles to a heading or paragraph, the numbers also inherit the style. However, if you want the numbers to have a different style, you can style the numbers explicitly.

  1. After applying autonumber to a heading, for example, h1, choose the option Numbering from the Apply Formatting to drop-down list.
  2. Change the properties, such as, font color and size. You can see that the change only applies to the number.
Define number style
Define number style

Change the start of a number

If you want the numbering to start from any other number, you can specify the starting number for the autonumber. If you specify 2, the autonumber starts from 2.

Change the start number
Change the start number

Apply Autonumber

After you've applied the autonumber on the paragraph or heading style, in the Topic Editor, apply the style to the text.

You can find the list of styles in the Style Editor.

The text now inherits the new style.

Apply paragraph style
Apply paragraph style

In the Topic Editor, change the levels using Tab and Shift+Tab.

Restart numbering

For a heading, if you want to restart the numbering from any value, on the Content Properties panel, specify the number that you want the heading to restart from.

Restart numbering
Restart numbering

Remove autonumber

To remove the autonumber, choose any of the following:

  • Apply a different class to the text that has autonumbering applied.
  • Clear the existing style.
  • Change the style definition from the CSS editor.
Note:

If you've applied autonumbering on the base class, you cannot remove the style.  

Get help faster and easier

New user?