CSS @counter-style - Additive Symbols

The descriptor additive-symbols allows the definition of symbols for the system descriptor @counter-style when it is set to additive.

  • It outlines additive tuples consisting of a symbol paired with a non-negative integer weight.

  • This system is used to create signed numbering schemes such as Roman numerals.

  • If the system descriptor is set to cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols() descriptor instead of additive-symbols.

Syntax

additive-symbols = [ <integer [0,∞]> && <symbol> ]#

CSS additive-symbols - Basic example

The following example demonstrates use of additive-symbols:

<html>
<head>
<style>
   @counter-style chapter-counter {
      system: additive ;
      additive-symbols: 5 V, 4 IV, 3 III, 1 I;
   }
   ol {
      list-style: chapter-counter;
      color: brown;
      font-size: 25px;
      padding-left: 10ch;
   }
</style>
</head>
<body>
<ol>
   <li>Chapter A</li>
   <li>Chapter B</li>
   <li>Chapter C</li>
   <li>Chapter D</li>
   <li>Chapter E</li>
   <li>Chapter F</li>
   <li>Chapter G</li>
   <li>Chapter H</li>
</ol>
</body>
</html>
Advertisements