CSS @counter-style - System

The system descriptor outlines the method for converting a counter's integer value into a string representation.

This specification is applied within an @counter-style to determine the behavior of the defined style.

This could appear in one of three forms:

  • One of the keyword options: cyclic, numeric, alphabetic, symbolic, additive, or fixed.

  • The keyword fixed accompanied by an integer.

  • The keyword or extends followed by the name of a @counter-style.

Syntax

system = Keyword | [fixed <integer>?] | [extends <counter-style-name> ]

CSS system - cyclic Value

This system rotates through a list of symbols, returning to the beginning when it reaches the end. It's suitable for both simple single-symbol enumeration styles and more complex multiple-symbol styles.

The following example demonstrates the usage of the cyclic system.

 <html>
<head>
<style>
   @counter-style chapter-counter {
      system: cyclic ;
      symbols: ▣ ;
      suffix: " ";
   }
   ul {
      list-style: chapter-counter;
      color: orange;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
	<ul>
		<li>Chapter A</li>
		<li>Chapter B</li>
		<li>Chapter C</li>
		<li>Chapter D</li>
		<li>Chapter E</li>
	</ul>
</body>
</html>

CSS system - fixed Value

This system defines a finite set of symbols. It's suitable for finite counter values and requires at least one symbol in the descriptor.

The following example demonstrates the usage of the fixed system.

<html>
<head>
<style>
   @counter-style item-counter {
      system: fixed ;
      symbols: ▣ ■ □ ;
      suffix: " ) ";
   }
   ul {
      list-style: item-counter;
      color: blue;
      background-color: lightgray;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <ul>
      <li>Item I</li>
      <li>Item II</li>
      <li>Item III</li>
      <li>Item IV</li>
      <li>Item V</li>
      <li>Item VI</li>
      <li>Item VII</li>
   </ul>
</body>
</html>

CSS system - symbolic Value

This system cycles through a list of symbols, doubling, tripling, and so on each pass. A valid style requires at least one symbol in the descriptor and works only for positive counter values.

The following example demonstrates the usage of the symbolic system.

<html>
<head>
<style>
   @counter-style item-counter {
      system: symbolic ;
      symbols: '*' '$';
      suffix: " ) ";
   }
   ul {
      list-style: item-counter;
      color: blue;
      background-color: lightgray;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Symbolic Counter<h1>
   <ul>
      <li>Item I</li>
      <li>Item II</li>
      <li>Item III</li>
      <li>Item IV</li>
      <li>Item V</li>
      <li>Item VI</li>
      <li>Item VII</li>
      <li>Item VIII</li>
      <li>Item IX</li>
      <li>Item X</li>
      <li>Item XI</li>
      <li>Item XII</li>
   </ul>
</body>
</html>

CSS system - alphabetic Value

This system interprets the given symbols as digits and creates an alphabetical numbering sequence. At least two symbols are required for a valid counting method.

The following example demonstrates the usage of the alphabetic system.

<html>
<head>
<style>
   @counter-style title-counter {
      system: alphabetic ;
      symbols: a b c d ;
      suffix: " ) ";
   }
   ul {
      list-style: title-counter;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Alphabetic Counter<h1>
   <ul>
      <li>Title 1</li>
      <li>Title 2</li>
      <li>Title 3</li>
      <li>Title 4</li>
      <li>Title 5</li>
      <li>Title 6</li>
      <li>Title 7</li>
      <li>Title 8</li>
      <li>Title 9</li>
      <li>Title 10</li>
   </ul>
</body>
</html>

CSS system - numeric Value

In this system, counter symbols are treated like digits in a place value number system, similar to the alphabetic system. However, in this numeric system, the first symbol represents 0, the next 1 and so on.

The following example demonstrates the usage of the numeric system.

<head>
<style>
   @counter-style title-counter {
      system: numeric ;
      symbols:"0" "1" "2" "3" "4" "5" "6" "7" "8" "9" ;
      suffix: "] ";
   }
   ul {
      list-style: title-counter;
      font-size: 25px;
      color: red;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Numeric Counter with numbers<h1>
   <ul>
      <li>Title A</li>
      <li>Title B</li>
      <li>Title C</li>
      <li>Title D</li>
      <li>Title E</li>
      <li>Title F</li>
      <li>Title G</li>
      <li>Title H</li>
      <li>Title I</li>
   </ul>
</body>
</html>

CSS system - additive Value

This counter style is for sign-value numbering systems like Roman numerals, where unique symbols represent values. These systems use additional symbols for larger values, and the number's value is found by adding its digits.

The following example demonstrates the usage of the additive system.

<html>
<head>
<style>
   @counter-style upper-roman {
      system: additive;
      range: 1 10;
      additive-symbols: 10 X, 5 V, 1 I, 2 II;     
   }
   ul {
      list-style: upper-roman;
      font-size: 25px;
      color: blue;
      background : lightblue;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Additive Example<h1>
   <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
      <li>Test 5</li>
      <li>Test 6</li>
      <li>Test 7</li>
      <li>Test 8</li>
      <li>Test 9</li>
      <li>Test 10</li>
   </ul>
</body>
</html>

CSS system - extends Value

This feature allows authors to apply another counter style's algorithm while modifying other aspects. In an extends system, unspecified descriptors and values are inherited from the specified counter style.

The following example demonstrates the usage of the extends system.

<html>
<head>
<style>
   @counter-style demo-alpha {
      system: extends upper-alpha;
      prefix:"[ ";
      suffix: " ] "
   }
   ul {
      list-style: demo-alpha;
      font-size: 25px;
      color: #fc5203;
      padding-left: 10ch;
   }
</style>
</head>
<body>
   <h1>Extends Example<h1>
   <ul>
      <li>Heading 1</li>
      <li>Heading 2</li>
      <li>Heading 3</li>
      <li>Heading 4</li>
      <li>Heading 5</li>
      <li>Heading 6</li>
      <li>Heading 7</li>
      <li>Heading 8</li>
      <li>Heading 9</li>
      <li>Heading 10</li>
   </ul>
</body>
</html>
Advertisements