Previous Page

Next Page

Flying Saucer XML/CSS2 Renderer

CSS Counter Support

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>