demos.counters.xhtml Maven / Gradle / Ivy

Go to download





	Flying Saucer: CSS List Support
	
	
	


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

	item
 
	item			   
		
			item
 
			item
 
			item		   
				
					item
 
					item
 
				
				
					item
 
					item
 
					item
 
				
			
			item
 
		
	
	item
 
	item
 


	item
 
	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>