Lists

This is the default layout for lists (both ordered and unordered lists - values are in px):

Markers are displayed in the padding area, so they are not included in the principal block box.

The lists are treated differently than ordinary block elements in the sense that their margins are not collapsed with the margins of the neighboring blocks or lists. This is also visible for nested lists. To summarize:

Setting the padding-left or margin-left properties on lists will move the whole list.
Setting the margin-left property on list items will move the whole list.
Setting the padding-left property on list items will only move the list item content (not the marker).

Note: If the padding-left property is set on lists and the margin-left property is set on list items, the result will move the whole list with a combination of both padding and margin values.

Edit online

How to Style Lists

Some common use-cases for styling lists require you to change each list level separately. For example, for an ordered list:

*[class ~= "topic/ol"] > *[class ~= "topic/li"] /* First Level */ {
  font-size: 15pt;
}
*[class ~= "topic/ol"] *[class ~= "topic/ol"] > *[class ~= "topic/li"] /* Second Level */ {
  font-size: 13pt;
}
*[class ~= "topic/ol"] *[class ~= "topic/ol"] *[class ~= "topic/ol"] > *[class ~= "topic/li"] /* Third Level */ {
  font-size: 11pt;
}
/* Etc. */

Similarly, for an unordered list:

*[class ~= "topic/ul"] > *[class ~= "topic/li"]::marker /* First Level */ {
  color: red;
  content: "\2022";
}
*[class ~= "topic/ul"] *[class ~= "topic/ul"] > *[class ~= "topic/li"]::marker /* Second Level */ {
  color: orange;
  content: "\2022";
}
*[class ~= "topic/ul"] *[class ~= "topic/ul"] *[class ~= "topic/ul"] > *[class ~= "topic/li"]::marker /* Third Level */ {
  color: green;
  content: "\2022";
}
/* Etc. */

Note: It is possible to mix lists type simply by mixing

*[class ~=
        "topic/ol"]

and *[class ~= "topic/ul"] in the CSS selector.

Edit online

How to Align Lists with Page Margins

It is possible to reposition the lists to align them with the rest of the text from the body.

The default CSS rules for the lists are as follows:

ol {
    display:block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    list-style-type:decimal;
    padding-left: 40px;
}
ul {
    display:block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    list-style-type:disc;
    padding-left: 40px;
}

To align the lists, the following rules are sufficient in the customization CSS:

*[class~="topic/ol"],
*[class~="topic/ul"] {
  padding-left: 0;
  list-style-position: inside;
}

Note: By default, the list-style-position property is set to outside.

Edit online

How to Continue List Numbering

It is possible to continue the numbering of an ordered list even when the content is split in multiple <ol> elements.

You need to define an @outputclass attribute on the lists where numbering should continue:

<ol>
  <li>First Item</li>
  <li>Second Item</li>
</ol>
<p>A paragraph</p>
<ol outputclass="continue">
  <li>Third Item</li>
</ol>

Then set the following content inside your CSS customization:

*[class ~= "topic/ol"] {
    counter-reset: item-count;
}

*[class ~= "topic/ol"][outputclass ~= "continue"] {
    counter-reset: none;
}

/* Add counter marker for each list level */
*[class ~= "topic/ol"] > *[class ~= "topic/li"]::marker {
    counter-increment: item-count;
    content: counter(item-count, decimal) ". ";
}
*[class ~= "topic/ol"][type=a] > *[class ~= "topic/li"]::marker{
    content: counter(item-count, lower-alpha) ". "; 
}
*[class ~= "topic/ol"][type=A] > *[class ~= "topic/li"]::marker{
    content: counter(item-count, upper-alpha) ". "; 
}
*[class ~= "topic/ol"][type=i] > *[class ~= "topic/li"]::marker{
    content: counter(item-count, lower-roman) ". "; 
}
*[class ~= "topic/ol"][type=I] > *[class ~= "topic/li"]::marker{
    content: counter(item-count, upper-roman) ". "; 
}

If the lists do not have the same parent, it is possible to start the numbering directly at a given number by setting the @outputclass attribute of the following list to start-X (where X is the number you want the list to start with):

<table frame="all">
  <title>Table with nested order lists</title>
  <tgroup cols="1">
    <tbody>
      <row>
        <entry>
          <ol>
            <li>First Item</li>
            <li>Second Item</li>
          </ol>
        </entry>
      </row>
      <row>
        <entry>
          <ol outputclass="start-3">
            <li>Third Item</li>
            <li>Fourth Item</li>
          </ol>
        </entry>            
      </row>
    </tbody>
  </tgroup>
</table>

Then the following content should be added into the previous CSS customization:

*[class ~= "topic/ol"][outputclass *= "start-"] {
    counter-reset: item-count oxy_xpath("xs:integer(substring-after(@class, 'start-')) - 1");
}

Edit online

How to Change the Numbering System of Ordered Lists

It is possible to change all lists to have a different numbering system and there are several methods that can be used to achieve this.

Use the `list-style-type` CSS Property.

The Chemistry engine supports the following types: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin, lower-alpha, upper-alpha.

*[class ~= "topic/ol"] {
  list-style-type: lower-roman;
}

Change the Content of the `:marker` CSS Pseudo-Element.

The following example emulates the Cyrillic numbering for the list items for an ordered list that has the @outputclass attribute set to cyrillic:

Important: This example will work only for lists up to 28 items. You will have to extend it for longer lists!

*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:marker {
  width:3em;
}

*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(1):marker{ content:"a" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(2):marker{ content:"б" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(3):marker{ content:"в" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(4):marker{ content:"г" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(5):marker{ content:"д" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(6):marker{ content:"е" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(7):marker{ content:"ж" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(8):marker{ content:"з" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(9):marker{ content:"и" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(10):marker{ content:"к" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(11):marker{ content:"л" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(12):marker{ content:"м" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(13):marker{ content:"н" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(14):marker{ content:"о" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(15):marker{ content:"п" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(16):marker{ content:"р" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(17):marker{ content:"с" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(18):marker{ content:"т" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(19):marker{ content:"у" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(20):marker{ content:"ф" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(21):marker{ content:"х" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(22):marker{ content:"ц" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(23):marker{ content:"ч" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(24):marker{ content:"ш" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(25):marker{ content:"щ" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(26):marker{ content:"э" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(27):marker{ content:"ю" }
*[class ~= "topic/ol"][outputclass ~= "cyrillic"] > *[class ~= "topic/li"]:nth-of-type(28):marker{ content:"я" }

Lists

How to Style Lists

How to Align Lists with Page Margins

How to Continue List Numbering

How to Change the Numbering System of Ordered Lists

Use the list-style-type CSS Property.

Change the Content of the :marker CSS Pseudo-Element.

Use the `list-style-type` CSS Property.

Change the Content of the `:marker` CSS Pseudo-Element.