Previous Page

Next Page

Flying Saucer XML/CSS2 Renderer

Counter support includes: Counters, reset, increment, and styles.

The following example is taken from the Mozilla project, at http://developer.mozilla.org/en/docs/CSS_Counters

1. item
2. item
   1. item
   2. item
   3. item
      1. item
      2. item
      1. item
      2. item
      3. item
   4. item
3. item
4. item

1. item
2. item

where the CSS is

ol {
    /* create a new 'section' counter */
    counter-reset: section;

    list-style-type: none;
}
	
li:before {
    /* increment this instance of the section counter */
    counter-increment: section;

    /* Adds the value of all instances of the section counter separated by a ".". */
    content: counters(section, ".") " ";
}

and the content is

<ol>
	<li>item</li> <!-- 1     -->
	<li>item			   <!-- 2     -->
		<ol>
			<li>item</li> <!-- 2.1   -->
			<li>item</li> <!-- 2.2   -->
			<li>item		   <!-- 2.3   -->
				<ol>
					<li>item</li> <!-- 2.3.1 -->
					<li>item</li> <!-- 2.3.2 -->
				</ol>
				<ol>
					<li>item</li> <!-- 2.3.1 -->
					<li>item</li> <!-- 2.3.2 -->
					<li>item</li> <!-- 2.3.3 -->
				</ol>
			</li>
			<li>item</li> <!-- 2.4   -->
		</ol>
	</li>
	<li>item</li> <!-- 3     -->
	<li>item</li> <!-- 4     -->
</ol>
<ol>
	<li>item</li> <!-- 1     -->
	<li>item</li> <!-- 2     -->
</ol>