Edit online

Lists

This is the default layout for 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 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 Style the List Markers

For the media print, the default CSS rules for the list items use the :marker pseudo-class.

@media print {
    *[class~="topic/li"]::marker {
      text-align: center;
      font-weight:bold;   
    }
    *[class~="topic/li"] {
      margin-left: 0.25in;
    }
}

To eliminate the bold font weight for the items form ordered lists then add the following rules to your customization CSS:

*[class~="topic/ol"] > *[class~="topic/li"]::marker {
      font-weight:normal;
}

For the unordered lists:

*[class~="topic/ul"] > *[class~="topic/li"]::marker {
      font-weight:normal;
}
Edit online

How to Continue List Numbering

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

You just 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: list-counter;
}

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

*[class ~= "topic/ol"] > *[class ~= "topic/li"] {
  counter-increment: list-counter;
}

*[class ~= "topic/ol"] > *[class ~= "topic/li"]::marker {
  content: counter(list-counter) ".\00a0";
}
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:"я" }