Edit online

Lists

For the HTML lists (<ol>, <ul>), Oxygen PDF Chemistry already defines the needed selectors, but sometimes you need greater control over the spacing or style of the marker.

The list element needs to have the display property set to block, and the children elements need to have the display property set to list-item. 

ul {
    display:block;
}

li {
    display:list-item;
    list-style-type: disc;
    margin-left: 0.5in;
}

Make sure you have a margin-left so that the bullet will have enough space to be painted inside the list item box.

List Marker Position

You can select whether the marker should be considered a decorator outside the box of the list item element (this is the default) or if it should be inline, on the first line of the content of the element. 

li.inside {
    list-style-position: inside;
}
li.outside {
    list-style-position: outside;
}

The list-style-type and list-style-image CSS Properties

Oxygen PDF Chemistry supports the following values for the list-style-type property:
  • box
  • check
  • circle
  • diamond
  • disc
  • hyphen
  • square
  • none
  • decimal
  • lower-roman/lower-latin
  • upper-roman/upper-latin
  • decimal-leading-zero
  • <string>
To use an image as a marker instead of a standard bullet or number, you can use the list-style-image property. You have to use the url function to point to an image resource:
li {
	list-style-image:  url("images/my_list_bullet.svg");
}

Using a :marker Pseudo Selector

There is a CSS pseudo-element that allows you to associate styles with the list marker. The following example changes the background color, font, width, and even the content of a list marker:

ol {
  ...
  counter-reset:cnt;
}

li:marker {
  width:3em;
  background-color: silver;
  color:red;
  font-weight: bold;
  text-align:left;
  counter-increment: cnt;  
  content:counter(cnt)" - \0430";
}
To change the marker symbol and its size:
li:marker {
  /* Club Symbol */
  content: "\2663";
  font-size: 0.8em;
}

To use an image instead of a number as a marker:

li:marker{
	content: url("images/my_list_bullet.svg");
}

You can even implement a custom list numbering using this selector. Such a technique may be useful for other list numbering schemes that are unique or currently not supported (such as lists lots of elements). You can use the nth-of-type() selector to choose the labels of each item, individually:

li:nth-of-type(1):marker{
	content:"alpha";
}
li:nth-of-type(2):marker{
	content:"beta";
}
li:nth-of-type(3):marker{
	content:"gamma";
}
...